Javascript上传和真实图像刷新/重新加载

Question

我需要为特定项目创建一个通过 Ajax 工作的图像管理器（以获取图像列表、显示它们......）。

新图像的上传或图像修改是通过 Ajax 脚本完成的（使用新的 javascript File API）。 上传正常，但是我在修改图片时遇到问题：上传后浏览器显示的图片是缓存的，而不是上传的！！

我知道这是一个经典的缓存问题，可以通过 'imagesrc?new Date.getTime()' hack 解决，但我不能在这里使用它。 事实上，这个 hack 并没有真正重新加载图像，它只是在缓存中创建一个新的图像实例，与图像 url 'imagesrc?new Date.getTime()' 相关联。

因此，如果在任何时候，进入图像管理器，我会重试显示图像，而不向 src 添加“？new Date.getTime()”，它将再次显示旧图像。 而且我要么无法系统地添加这个 hack（因为，例如，如果图像管理器需要显示很多非常重的图像，那么从浏览器缓存中获取它们直到它们被修改是很有用的）。

我在互联网上搜索了一种解决此问题的方法（实际上是在 javascript 上传后替换缓存的图像，而不是使用上述 hack），但我一无所获。

有没有办法做到这一点，还是完全不可能？ 任何帮助或建议将不胜感激。

在此先感谢

奥利维尔

Answer 1

将您的服务器配置为发送 ETag-headers 以获取图像。

ETag 是文件的哈希值，在文件被修改时会发生变化。如果发送了 ETag，浏览器将添加一个 If-None-Match-header，其中包含在其下一个请求中最后收到的该资源的 ETag，如果没有任何更改，服务器将使用 304: not modified 响应以节省流量，或者发送新文件有一个。