代码之家  ›  专栏  ›  技术社区  ›  Chaddeus

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

  •  5
  • Chaddeus  · 技术社区  · 14 年前

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

    新上传的文件与旧文件同名,所需的只是刷新图像的方法。因为它是同一个名字,cache正在妨碍 method described in this article didn't work

    有什么想法吗?

    1 回复  |  直到 14 年前
        1
  •  15
  •   Nick Craver    14 年前

    您链接的文章在此处不起作用,但您可以使用图像上的查询字符串来中断缓存,如下所示:

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

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