表单更新后如何在html中重新加载特定区域

时间:2020-01-16 06:25:34

标签: javascript django django-templates

我有一个表格,需要使用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);
            }
        }
    });
});

当前,成功功能中的Toster正在更新

我需要通过ajax成功更新映像

0 个答案:

没有答案
相关问题