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.

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.

• javascript
• html
• image

7 Answers 7

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.

It is not possible, because the client (where the javascript is run) is sent a copy of the file, without the real filename or meta info from the server. The only way it could be made possible is if the server willingly declares somehow the file attributes in a way the client can look up - but you need to be able to control the server code to be able to do this.

The image element in the DOM spec does not have a property for the file time of images so you cannot get it from a direct DOM property of the image element.

Many images recorded by digital cameras contain metadata (EXIF) that has a file creation time in it. It is possible to use javascript to read the EXIF metadata and read the creation time from the EXIF. In fact, there are some browser plug-ins that show you this type of metadata from images in the browser.

Whilst this is not possible for images loaded conventionally as part of the HTML, you can retrieve the last-modified date/time of an image if you load it over AJAX (providing the server sends this header information).

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

You can get the details using something like this:

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   

Depending to the type of img file, you can download it, and retrieve meta information in some header ( format dependent ).

But as it's mentioned some ajax for instance will do that for you.

How about going with $.ajax and limit the request to only the 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;
    }
});