是否可以访问< img>文件的创建时间？ src在JavaScript？ [英] Is it possible to access the file creation time of an <img> src in javascript?

问题描述

以下示例

 < img id =my_imgsrc =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; //不需要格式化
< / script> 
  

我想问一下 is_there_any_method_for_this（）; 存在，或者它可以访问所显示图像的文件创建（或修改）时间。

它发现Apache似乎默认发送上次修改时间作为标题。如你所描述的那样，仅仅通过使用javascript方法就无法获得这个头文件。您可以通过使用AJAX重新下载文件并检查重新下载的图像的最后修改时间（几乎总是与原始图像相同）以非100％可靠或有效的方式进行。

用AJAX调用一个小jQuery ...

 < img id =my_imgsrc =images / current.png/> 
 
 <！ - 包含jQuery  - 在头脑中做得更好 - > 
< 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）{
 //在回调中 - 在ajax请求完成之后... 
 var filetime = xhr.getResponseHeader（ 'Last-Modified'）; 
 i.title ='image created：'+ filetime; //不需要格式化
}）
< / script> 
  

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

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

  {
 images / current.png ：{last-modified：2012-08-07，filesize：1056 kb}，
images / raisin.png：{last-modified：2012-08 -04，文件大小：334 kb}，
images / sultana.png：{last-modified：2012-08-02，filesize：934 kb} 
} 
  

然后可以很容易地解析客户端（使用 JSON.parse（））和de termine所有您需要的文件 - 更加高效和可靠。

Given the following example

<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>

I'd like to ask if is_there_any_method_for_this(); exists or if it's at all possible to access the file creation (or modification) time of the displayed image.

解决方案

It transpires that Apache seems to send the last-modified time as a header by default. Getting hold of this header is not possible simply by using a javascript method as you describe. You could do it in a not 100% reliable or effecient way by re-downloading the file using AJAX, and checking the last modified time of the re-downloaded image (which will almost always be the same as the original).

using a little jQuery for the AJAX call...

<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>

This method will only work when the server sends the correct Last-Modified header, and it might be different (although usually not) than the image previously loaded, and causes extra traffic and requests by re-downloading the image you want the timestamp for.

If possible - I think a better solution is to get the server to expose the timestamps of files via a small data feed, maybe sending JSON showing last-modified and other meta data for each file based on the filename as a key... so the server should send something like this:

{
    "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"}
}

Which would then be easy to parse client side (using JSON.parse()) and determine all the filesizes you need - more efficiently and reliably.

这篇关于是否可以访问< img>文件的创建时间？ src在JavaScript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！