如何在 javascript/jquery 中刷新 div

Question

我面临一个问题

我正在上传头像

它保存到 s3 存储桶并返回 url

但我面临一个问题

图片更新后需要刷新页面以显示新图片

图片更新后我需要更新该 div

这是我的 Ajax 调用

$("#profile-pic-upload").change(function () {
    var input_detail = this;
    console.log(input_detail);
    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) {
            if (data['status'] == true) {
                toastr.success(data.msg);
                $('#imagePreview').css('background-image', 'url('+data.avatar+')');
            }
            else {
                toastr.error(data.msg);
            }
        }
    });
});

这是我的 HTML

<div class="avatar-preview">
    {% if user_profile.avatar %}
        <div id="imagePreview" style="background-image: url('{{user_profile.avatar}}');"></div>
    {% else %}
        <div id="imagePreview" style="background-image: url('{% static 'assets/img/user-64x.png' %}');"></div>
    {% endif %}
</div>

在上面的代码中，我从 data.avatar 获取图像 url

但我的问题是它只更新一次

例如，如果没有更新图像，它就会更新

如果用户配置文件中有一张图片我更新为新的然后它上传到 s3 存储桶但它不会显示在 div 中。我需要刷新页面才能在那里显示它

Answer 1

在您的成功回调中更改您的：

$('#imagePreview').css('background-image', 'url('+data.avatar+')');

到：

var randomId = new Date().getTime();
$('#imagePreview').css('background-image', 'url(' + data.avatar + '?random=' + randomId + ')');

您可以使用任何要强制刷新图像的 randomId，我选择使用当前时间戳。

像这样只更改一个参数会强制网络浏览器重新加载图像，javascript...而不是使用缓存中的那个。