是否可以在javascript中访问<img> src的文件创建时间？

Question

给出以下示例

<img id="my_img" src="images/current.png" />

<script language="javascript">
var i = document.getElementById('my_img');
var filetime = i.is_there_any_method_for_this(); // ?????
i.title = 'image created: ' + filetime; // don't care about formating now
</script>

我想询问是否is_there_any_method_for_this();存在或者是否可以访问所显示图像的文件创建(或修改)时间.

Answer 1

事实证明，Apache 似乎默认将最后修改时间作为标头发送。仅通过使用您描述的 javascript 方法是不可能获得此标头的。您可以通过使用 AJAX 重新下载文件并检查重新下载图像的上次修改时间（几乎总是与原始图像相同），以非 100% 可靠或有效的方式完成此操作。

使用一点 jQuery 进行 AJAX 调用...

<img id="my_img" src="images/current.png" />

<!-- include jQuery - better done in the head -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script language="javascript">
var i = document.getElementById('my_img');
$.get(i.src,function(data,status,xhr){
    // in the callback - after the ajax request completes...
    var filetime = xhr.getResponseHeader('Last-Modified');
    i.title = 'image created: ' + filetime; // don't care about formating now
})
</script>

此方法仅在服务器发送正确的Last-Modified标头时有效，并且它可能与之前加载的图像不同（尽管通常不会），并通过重新下载您想要时间戳的图像导致额外的流量和请求。

如果可能的话 - 我认为更好的解决方案是让服务器通过一个小数据源公开文件的时间戳，也许发送 JSON 显示基于文件名作为键的每个文件的最后修改和其他元数据......所以服务器应该发送如下内容：

{
    "images/current.png":{"last-modified":"2012-08-07","filesize":"1056 kb"},
    "images/raisin.png":{"last-modified":"2012-08-04","filesize":"334 kb"},
    "images/sultana.png":{"last-modified":"2012-08-02","filesize":"934 kb"}
}

这将很容易解析客户端（使用JSON.parse()）并确定您需要的所有文件大小 - 更有效和可靠。

Answer 2

这是不可能的，因为客户端（运行 JavaScript 的地方）会收到文件的副本，而没有来自服务器的真实文件名或元信息。实现这一点的唯一方法是，服务器愿意以客户端可以查找的方式声明文件属性，但您需要能够控制服务器代码才能执行此操作。