8

给定以下示例

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

4

7 回答 7

5

事实证明，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()）并确定您需要的所有文件大小 - 更有效和更可靠。

于 2012-08-08T08:51:24.610 回答
3

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

于 2012-08-08T08:07:03.303 回答
2

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

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

于 2012-08-08T08:08:16.727 回答
2

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

$.get('path/to/img').done(function(response, result, xhr) {
    alert("last modified "+xhr.getResponseHeader('last-modified'));
});
于 2012-08-08T08:10:43.467 回答
2

您可以使用以下方式获取详细信息：

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-08T08:11:54.530 回答
1

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

但是正如它所提到的，一些 ajax 会为你做到这一点。

于 2012-08-08T08:16:23.603 回答
0

如何使用 $.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;
    }
});
于 2017-10-26T17:47:48.807 回答