Есть ли способ обновить изображение после загрузки ajax-файла в jQuery?

Question

У меня есть изображение на странице. Я использую плагин формы AJAX для загрузки одного изображения, и после загрузки фотографии я хочу обновить изображение, которое уже есть на странице.

$("#profilePicForm").ajaxForm(function() { 
    alert("Photo updated");
    $("#newPhotoForm").slideToggle();
    $("#profilePic img").load(function() {
        $(this).hide();
        $(this).fadeIn('slow');
    }).attr('src', '/Content/UsrImg/Profiles/PhotoName.jpg');
}); 

Вновь загруженный файл имеет то же имя, что и старый, все, что нужно, - это способ обновить изображение. Поскольку это одно и то же имя, мешает кеш - метод , описанный в этой статье, не работает .

Есть идеи?

Answer 1

Статья, на которую вы ссылаетесь, здесь не работает, но вы можете разбить кэш строкой запроса на изображении, например:

$("#profilePicForm").ajaxForm(function() { 
  alert("Photo updated");
  $("#newPhotoForm").slideToggle();
  $("#profilePic img").load(function() {
    $(this).hide();
    $(this).fadeIn('slow');
  }).attr('src', '/Content/UsrImg/Profiles/PhotoName.jpg?' + new Date().getTime());
}); 

Это заставит браузер снова проверить изображениепоскольку временная метка добавляется в строку запроса, она каждый раз отличается.Это означает, что браузер просто не может больше доверять кешу, поскольку это немного другой запрос к серверу ... поэтому он приведет к повторной загрузке, как вы хотите.