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

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');
}); 

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

有什么想法吗？

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());
}); 

这会强制浏览器再次检查图像，因为时间戳被添加到查询字符串中，所以每次都不同。这意味着浏览器不能再信任缓存，因为这是一个略有不同的服务器请求......所以它会导致像您想要的那样重新获取。