Как обновить sh div в javascript / jquery - PullRequest
Новая
       4

Как обновить sh div в javascript / jquery

1 голос
/ 28 февраля 2020

Я столкнулся с одной проблемой

Я загружаю фотографию профиля

Она сохранена в корзину s3 и возвращает URL

Но я столкнулся с одной проблемой

После обновления изображения необходимо обновить sh страницу для отображения нового изображения

Мне нужно обновить этот 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>

В приведенном выше коде я получаю URL-адрес изображения из data.avatar

Но моя проблема в том, что он только обновляется только один раз

Например, если изображение не обновлено, оно обновляется

Если в профиле пользователя есть изображение, которое я обновил до нового, то оно загружается в корзину s3, но не отображается в див. Мне нужно обновить sh страницу для отображения там

1 Ответ

3 голосов
/ 28 февраля 2020

В вашем успешном обратном вызове измените: 

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

на: 

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

Вы можете использовать любой randomId, который вы хотите заставить обновлять изображение, я выбрал использовать текущая временная метка.

Изменение только одного такого параметра заставляет веб-браузер перезагружать изображение, javascript ... и не использовать его в кэше.

...