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

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

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

1 个答案: