是否可以使用jQuery从服务器重新加载具有相同文件名的图像?

例如,我在页面上有一个图像,但是,物理图像可以根据用户操作而更改。注意,这并不意味着文件名发生了变化,而是实际的文件本身发生了变化。

ie:

用户在默认页面上查看图像 用户上传新图像 页面上的默认图像没有改变(我假设这是由于文件名相同,浏览器使用缓存版本)

不管下面的代码被调用的频率如何,同样的问题仍然存在。

$("#myimg").attr("src", "/myimg.jpg");

在jQuery文档中,如果“load”函数有一个默认方法来触发事件,而不是将回调函数绑定到成功/完成的元素加载,那么它将是完美的。

非常感谢任何帮助。


当前回答

有时候解是这样的

$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

也没有正确刷新SRC,尝试一下,它为我工作->

$("#Image").attr("src", "dummy.jpg");
$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

其他回答

如果您需要刷新确切的URL,而您的浏览器已经缓存了图像,那么您可以使用AJAX和请求头迫使浏览器下载新的副本(即使它还没有过期)。你可以这样做:

var img = $("#myimg");
var url = img.attr("src");
$.ajax({
    url: url,
    headers: { "Cache-Control": "no-cache" }
}).done(function(){
    // Refresh is complete, assign the image again
    img.attr("src", url);
});

其他方法对我都不起作用,因为在查询字符串中添加令牌会下载新图像,但它不会使缓存中的旧URL中的图像无效,因此未来的请求将继续显示旧图像。旧的URL是唯一发送到浏览器的URL,服务器指示客户机缓存图像的时间超过了它应该缓存的时间。

如果这仍然不能为您刷新图像,看看这个答案是否有帮助。有关更多信息,这里是关于Cache-Control请求头的文档。

这工作很棒!但是,如果您多次重载SRC,时间戳也会连接到url。我修改了已接受的答案来处理这个问题。

$('#image_reload_button').on('click', function () {
    var img = $('#your_image_selector');
    var src = img.attr('src');
    var i = src.indexOf('?dummy=');
    src = i != -1 ? src.substring(0, i) : src;

    var d = new Date();
    img.attr('src', src + '?dummy=' + d.getTime());
});

听起来好像是您的浏览器缓存了图像(我现在注意到您在问题中写了这个)。你可以通过传递一个额外的变量来强制浏览器重新加载图像,如下所示:

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());

使用“#”作为分隔符可能会有用

我的图像保存在“www”上面的“隐藏”文件夹中,这样只有登录用户才能访问它们。由于这个原因,我不能使用普通的<img src=/somefolder/1023.jpg>,但我发送请求到服务器像<img src=?1023>,它通过发回名称为'1023'的图像进行响应。

该应用程序用于裁剪图像,因此在ajax请求裁剪图像后,它将作为服务器上的内容进行更改,但保留其原始名称。为了查看裁剪的结果,在ajax请求完成后,将从DOM中删除第一个图像,并插入一个具有相同名称的新图像<img src=?1023>。

为了避免兑现,我在请求中添加了“时间”标签,前面加了“#”,这样它就变成了<img src=?1023#1467294764124>。服务器会自动过滤掉请求的哈希部分,并通过发送我的“1023”图像来正确响应。因此,我总是得到图像的最后一个版本,而没有太多的服务器端解码。

我只是在html中这样做:

<script>
    $(document).load(function () {
        d = new Date();
        $('#<%= imgpreview.ClientID %>').attr('src','');
    });
</script>

然后在后面的代码中重新加载图像,就像这样:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        image.Src = "/image.jpg"; //url caming from database
    }

}