有没有可能在javascript中访问<img> src的文件创建时间？

考虑下面的例子有没有可能在javascript中访问<img> src的文件创建时间？

<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();存在，或者如果它是在所有可能的访问显示的图像的文件创建（或修改）的时间。

来源

2012-08-08 Petzi

这是不可能的，因为客户端（在运行javascript的地方）发送了一个文件的副本，而没有来自服务器的真实文件名或元信息。唯一可能的方式是，如果服务器愿意以某种方式声明文件属性，客户端可以查找 - 但您需要能够控制服务器代码才能执行此操作。

来源

2012-08-08 08:07:03

DOM规范中的图像元素没有图像文件时间的属性，因此无法从图像元素的直接DOM属性中获取它。

许多由数码相机记录的图像包含元数据（EXIF），其中包含文件创建时间。可以使用javascript读取EXIF元数据并从EXIF读取创建时间。实际上，有一些浏览器插件会向您显示浏览器中图像的这种类型的元数据。

来源

2012-08-08 08:08:16 jfriend00

虽然这对传统上作为HTML一部分加载的图像来说是不可能的，但如果您通过AJAX加载它（提供服务器发送此标头信息），您可以检索图像的最后修改日期/时间。

$.get('path/to/img').done(function(response, result, xhr) { 
    alert("last modified "+xhr.getResponseHeader('last-modified')); 
});

来源

2012-08-08 08:10:43 Utkanos

你应该解释如何在服务器（也许Apache）的可发送适当的头，使之成为完整的解决方案 - 那我就投你一票，〜） – 2012-08-08 08:15:06

Ajax HEAD在我看来会更合适 – mplungjan 2012-08-08 08:17:46

@BillyMoon - 老实说，我不知道这个答案，我不是服务器人。我只知道这往往会出现在AJAX响应头文件中。 – Utkanos 2012-08-08 08:22:14

您可以使用像这样得到的细节：

var fso, f, s; 
fso = new ActiveXObject("Scripting.FileSystemObject"); 
f = fso.GetFile(filespec); 
s = f.Path.toUpperCase() + "<br>"; 
s += "Created: " + f.DateCreated + "<br>"; 
s += "Last Accessed: " + f.DateLastAccessed + "<br>"; 
s += "Last Modified: " + f.DateLastModified

来源

2012-08-08 08:11:54

这是假设图像在您正在访问的网页上的机器上。我怀疑这是我们提问者的情况。 – 2012-08-08 08:14:21

你在哪里定义'f'？ – rubo77 2014-07-31 18:39:38

根据到IMG文件的类型，你可以下载它，并检索一些头（格式相关）的元信息。

但正如它提到的一些阿贾克斯例如会为你做。

来源

2012-08-08 08:16:23 N4553R

它表明，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()）客户端，并确定你需要的所有的filesizes - 更高效，更可靠。

来源

2012-08-08 08:51:24

我试过上面的代码，但回调没有被调用。 – Petzi 2012-08-09 07:26:43

验证了代码/ img路径，使用window.setTimeout而不是$ get ... 但是，由于它取决于服务器软件/行为（并且服务器超出了我的控制范围），所以我认为没有可靠的解决方案... 尽管如此非常感谢... – Petzi 2012-08-09 07:33:47

如何使用$。Ajax和限制要求只有头部...

var i = document.getElementById('my_img'); 
var xhr = $.ajax({ 
    type: 'HEAD', 
    url: i.src, 
    success: function(msg) { 
     var filetime = xhr.getResponseHeader('Last-Modified'); 
     i.title = 'image created: ' + filetime; 
    } 
});

来源

2017-10-26 17:47:48 Allbite

有没有可能在javascript中访问<img> src的文件创建时间？

回答

相关问题