javascript - 显示文件夹中最新的图像，自动刷新

Question

我有一个网络摄像头，大约每 30 秒通过 FTP 将照片上传到特定文件夹。这些文件使用其创建日期和时间来命名。

例如，图像“image20161023s131200029.jpg”将在 2016 年 10 月 23 日 13:12:00 创建。图像的命名方式无法更改。下一张图片将在大约 30 秒后上传，但时间不准确，因此无法预测下一个文件名。

我希望显示最新的图像并每 30 秒刷新一次。

我的问题是我可以在 php 中显示最新的图像，使用 scandir() 和 sort() 来获取最新的图像，但由于这是在 PHP 中，因此无法刷新。如果位置始终相同，我还可以使用 JavaScript 以给定的时间间隔引用图像，因此如果最新的图像始终位于“/webcam/webcam01.jpg”，那么就可以了。然而，当图像名称不断变化时，我不确定如何执行此操作，如果有人知道最好的(或至少是有效的)方法，那就太棒了。

我希望我已经清楚我想要做什么，抱歉，如果之前已经回答过这个问题 - 我已经尝试过此网站搜索和谷歌，但均无济于事。

Answer 1

好吧，我认为考虑到您的限制，这里的解决方案将要求您使用服务器端代码(PHP)来解析最新的图像文件名并通过 REST 端点公开它。

因此，您的 JavaScript 代码将向您的服务器发出图像文件 URL 的请求。您的 PHP 代码将找到最新的图像并返回该文件的相应 url。它看起来像这样:

// Function to refresh the image.
function refreshImage() {
    $.get("myserver/getImageUrl", function( data ) {
        $("img").attr('src', data);
    });
}

//refresh image every 31 seconds
setInterval(refreshImage, 31000);

本质上，如果无法控制文件名，您将需要使用服务器端代码来解析客户端代码的文件名。如果您可以控制输出文件名以使其可预测，或者使最新图像始终具有相同的名称，那么您就不需要服务器端部分。