Javascript 无法强制web服务器从磁盘重新加载映像 背景

我的目标是构建一个显示页面幻灯片的web服务器。有些幻灯片可能只是图像，有些则是带有css的文本

安全 没什么特别的，它不会暴露在外面的世界里

接口 用户必须能够修改文本幻灯片中的文本

用户必须能够修改幻灯片上显示的图像

图像必须以自动方式进行更改（网络上的另一台机器创建了一个图像，并且应该能够将该图像推送到服务器上显示。或者，服务器应该能够下载图像本身，无论哪种方式）

我所拥有的 我对这个领域知之甚少，于是开始阅读和修修补补。LAMP服务器似乎很简单

我复制了一个文件（据有知识的人说，这是一个不好的来源），并删除了我不需要的东西

我创建了：

• 用户输入文本的表单，保存在纯文本文件中（好吧，在我更新Ubuntu之前，这是有效的，我猜是软件包升级破坏了一些东西，现在表单只显示原始php代码。编辑：需要重新启用mods，可能是因为php从5升级到7:

  sudo a2enmod php7.2

  ）
• 我自己的html文本幻灯片，从文件中读取。修改时要从文件中读取是件麻烦事。我认为

  txtFile.setRequestHeader（'pragma'，'no cache'）就是它所做的

• 带有本地图像的幻灯片

我真正的问题 复制新图像代替用作图像幻灯片输入的文件不会更改服务器显示的图像。这似乎是一个常见的问题，一年来提出了几种解决方案。这些我都没能成功。文件和地址末尾的随机字符串（难以自动化？），在我的index.html头部：

+    <!-- attempt to reload images on change, does not work: -->
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />

+
+    
+    
+    

浏览器，至少是chrome浏览器，在避免缓存方面似乎受到了越来越多的限制

所以在我的设置中（Ubuntu18.04，LAMP的apt软件包，以及最新的chrome），当显示幻灯片时，如何让我的服务器从磁盘重新加载图像

编辑：我不想点击刷新，服务器应该自动重新加载图像

另一个模糊的问题可能是罪魁祸首

---

我做事很奇怪吗？我觉得开发这个程序比它应该做的更麻烦，这样我可能会走错方向。您能给我介绍另一个更有意义的方向吗？

您可以通过更改其URL来强制web服务器从磁盘重新加载图像。由于您不想经常更改其名称或路径，因此将为其提供一个v参数，如：

<img src="/images/myimage.png?v=2">

如果要再次重新加载，请将其更改为

<img src="/images/myimage.png?v=3">

---

等等。

您正在尝试禁用浏览器缓存。虽然从原则上讲，缓存非常简单：浏览器保存加载的资源，并在后续请求时从内存中为它们提供服务，但跨浏览器/跨设备禁用缓存相当复杂

您可以做的最简单的事情是在图像中附加一个唯一的参数，以诱使浏览器相信它是另一个参数：

<img src="/path/to/image.jpg?v=<?php time(); ?>">

“>

这将使您的浏览器始终加载

“>

每隔几秒钟进行一次ajax调用，读取

timestamp.txt

。当

timestamp.txt

的内容与

src

的

v

参数不同时，用新的时间戳替换

src

值，使浏览器立即重新加载文件。
注意：ajax本身将被缓存，除非您确保它不会被缓存：

'timestamp.txt？v='+new Date（）.getTime（）

---

我认为图像版本控制是最好的选择。每当用户上传新图像时，将该信息放入数据库（如果有），并使用该行的ID使缓存崩溃。类似于

的东西，我会尝试通过一个php文件提供图像：

。根据我的经验（没有大量测试），它们不会被缓存。一个有趣的方法可能是在连续循环中使用AJAX来获取滑块的图像。这样，即使没有页面刷新，它们也会持续更新。但是，如何自动更新页面源以接受新的唯一标识符呢？我丢失了一些东西。@Gauthier：当你上传文件时，你创建了一个唯一的标识符并保存在数据库中。提供图像时，查询数据库以获取标识符。覆盖图像时，将替换标识符。这样就可以缓存未更改的图像。已更改的文件将被重新加载。@Gauthier-还有一件事：您不需要将标识符附加到保存在服务器上的文件名中。名称可以保持原样。在

file.jpg

和

file.jbg？v=bogus

中，都将加载

file.jpg

。看起来我不能仅仅覆盖图像文件，必须有人告诉服务器它是一个新版本…不是服务器不知道它。这是浏览器。现在，您正在设计一种机制，让服务器能够告诉浏览器：“嘿，这一个改变了。重新加载它！”但我不想手动更改html，甚至不想点击刷新。图片的新版本应该会自动显示在幻灯片中。@Gauthier这就是我建议您使用Ajax的原因。您可以在后端使用PHP检索所需的图像，并让JS更新DOM。无需手动更新任何源或刷新页面。@Gauthier如果要重新加载图像，您可以从服务器端将任何版本放在那里。如果您想一直重新加载图像，请确保您在其中放置了始终不同的内容。如果要在图像已加载时更改图像，只需使用Javascript更改v的值即可。