Как перезагрузить перикулярную область в html после обновления формы - PullRequest
Новая
       3

Как перезагрузить перикулярную область в html после обновления формы

1 голос
/ 16 января 2020

У меня есть форма, мне нужно обновить профильное изображение, используя Ajax .... После загрузки область должна быть изменена без обновления страницы

Вот мой html 

            <div class="row">
                <div class="col-md-12">
                    <form data-action="{% url 'user-profileupdate' %}"  id="profile-file-upload" method="post" enctype="multipart/form-data">
                        <div class="text-center">
                            <div class="avatar-upload">
                                <div class="avatar-edit">
                                     <input name="input_file" type="file" id="profile-pic-upload" />
                                    <label for="profile-pic-upload"></label>
                                </div>
                                <div class="avatar-preview">
                                    {% if user_profile.avatar %}
                                        <div id="imagePreview" style="background-image: url('{{user_profile.profile_pic}}');"></div>
                                    {% else %}
                                        <div id="imagePreview" style="background-image: url('{% static 'assets/img/user-64x.png' %}');"></div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

Вот javascript часть 

$("#profile-pic-upload").change(function () {
    var data = new FormData();
    var file = this.files[0];
    data.append("file", file);
    $.ajax({
        type: 'POST',
        data: data,
        contentType: false,
        processData: false,
        url: $("#profile-file-upload").data('action'),
        cache: false,
        success: function (data, status) {
            $("#imagePreview").load(" #imagePreview")
            if (data['status'] == true) {
                toastr.success(data.msg);
                $('#profile-pic-upload').val('');
            }
            else {
                toastr.error(data.msg);
            }
        }
    });
});

В настоящее время тостер обновляется в функции успеха

Мне нужно обновить изображение с помощью ajax success

...