有沒有可能在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的文件創建時間？

回答

相關問題