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的地方）被发送文件的副本，没有来自服务器的真实文件名或元信息。唯一可行的方法是服务器是否愿意以客户端可以查找的方式以某种方式声明文件属性 - 但是您需要能够控制服务器代码才能执行此操作。

Answer 3

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

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

Answer 4

虽然对于通常作为HTML的一部分加载的图像而言，这是不可能的，但如果您通过AJAX加载图像，则可以检索图像的上次修改日期/时间（假设服务器发送此标题信息）。

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

Answer 5

根据img文件的类型，您可以下载它，并在某些标题中检索元信息（取决于格式）。

但正如所提到的，例如ajax会为你做这件事。

Answer 6

您可以使用以下内容获取详细信息：

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

Answer 7

如何使用$ .ajax并将请求限制为仅HEAD ...

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;
    }
});

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

7 个答案: