有没有办法在 jQuery 中上传 ajax 文件后刷新图像？答案

【问题标题】：Is there a way to refresh an image after an ajax file upload in jQuery?有没有办法在 jQuery 中上传 ajax 文件后刷新图像？
【发布时间】：2011-03-14 18:39:28
【问题描述】：

我在页面上有一张图片。我正在使用 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');
});

新上传的文件与旧文件同名，只需要一种刷新图像的方法。由于它是同名的，所以缓存会妨碍 - method described in this article didn't work。

有什么想法吗？

【问题讨论】：

标签： jquery ajax image

【解决方案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());
});

这会迫使浏览器再次检查图像，因为时间戳正在添加到查询字符串中，因此每次都不同。这意味着浏览器不再信任缓存，因为这是一个稍微不同的服务器请求......所以它会导致你想要的重新获取。

【讨论】：