Extract Date and Time Stamp of a file/image

This site is best viewed in a modern browser with JavaScript enabled.

Extract Date and Time Stamp of a file/image

gangerolv

I'm uploading an image every few seconds. I'd like to display the date/time stamp of the image on the web page below the image. I have not seen any code that allows me to do that, so it is possible that javascript (or any other codes) will not be able to do that. Thanks for any help!

007Julien

It's not possible to get this date with javascript (*) for an image. Javascript lastmodified property returns only the date and time the current document was last modified

document.write(document.lastModified);
// or 
var lastModifedDate=new Date(document.lastModified);

On the other hand, PHP filemtime() function returns the time, as a Unix timestamp, the file was last modified, or FALSE in case of an error. Then it's possible to insert this date (for example with a date ("Y-m-d H:i:s.", filemtime($filename)) in the name of your image files to display this dates with javascript...

(*) Internet explorer make a « youth error » with ActiveXObject("Scripting.FileSystemObject"). This solution, which do not work on the recent versions without to degrade the safety conditions, is not advisable.

jalarie

If you can use iframe:

<iframe name="IFrame1" id="IFrame1" src="image.gif" onload="CheckIt();">
 Your browser doesn't support IFrames.
</iframe>

function CheckIt() {
  var DLM=window.IFrame1.document.lastModified;
  alert(DLM);
  return true;
}

007Julien

A very good idea, to complete to work with IE, Mozilla, Opera, Safari and Google Chrome... But the date is not the one of the image but that of a document, creates in the opening of the page, containing It !. What a pity !
See Firebug HTML

<iframe id="idIf" class="ifCl" onload="checkIt()" src="crrl.gif">
  <html>
    <head>
      <style>
        img { display: block; }
      </style>
      <title>crrl.gif (Image GIF, 88x72 pixels)</title>
    </head>
    <body>
      <img src="file:///F:/EasyPHP5.3.0/www/astuces&recherches/crrl.gif" alt="file:///F:/EasyPHP5.3.0/www/astuces&recherches/crrl.gif">
    </body>
  </html>
</iframe>

jalarie

Place the code I gave in the main page, not as part of the iframe. I tested it in Opera 10.10, Firefox 2.0.0.20, and Internet Explorer 6.0.2800.1106. It doesn't work in Mozilla 1.1, Netscape 4.08, nor Netscape 7.01.

007Julien

Thanks ! Sorry. You code is right on a server ... . It works too with the latest versions of Safari for windows and Google Chrome.

I tested it (with the iframe in the main page) only with files. On this case, Mozilla FireFox built the document supra and give the opening date like Safari whereas google chrome don't work.

Finally your solution can be complete and used dynamically with an pseudo-hidden iframe...

<style>
#IFrame1{position absolute;left:-2000px;top:0;}
</style>

rnd_me

step aside kids, stop messing with iframes and do it right:

function urlDate(U) {
    var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
    X.open('GET', U, false);
   try{ X.send();}catch(y){}
  var dt=X.getResponseHeader("Last-Modified");
  return dt ? new Date(dt).toString() : new Date(1970,0,0);
}

urlDate("http://www.webdeveloper.com/forum/images/statusicon/user_offline.gif")

gangerolv

Thanks for your suggestions!

I tried to use the CheckIt() function, and it returns correct date and time for the image i have uploaded to the server. (My website is at http://bearmtn.us). The date is reported correctly in IE. I thought I had it fixed in Opera by adding toLocaleString(), but then it started to report GMT date/time.

But, is there a way to return this value and use document.write to display the date/time below the picture? I have tried this and I can't get it to work (I'm an novice in JS). I tried to define a global variable, but no success.

I also tried the urlDate function suggested by @rnd_me, but it returns null in Opera 11.52 and FoxFire, and it appears not to work in IE.

Thanks again, I think I'm on track, but needs some refinements.

jan

007Julien

Don't use document.write (witch is made for writing at the opening of the page or in a new document with a popup). Use an input type text with a value (and no border) or an innerHTML in a <p>.
Then the 16 first bytes from new Date().toUTCString() (IE giv UTC, Fire Fox GTM...) have the same shape with different browsers...
Then you can write something like this

<body>
<div id="cdr"><p><img src="crrl.gif"></p><p id="lgd"></p></div>
<script type="text/javascript">
function urlDate(U) {
    var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
    X.open('GET', U, false);
   try{ X.send();}catch(y){}
  var dt=X.getResponseHeader("Last-Modified"); 
	// alert(X.getAllResponseHeaders()); // to see all headers
  return new Date(dt).toUTCString();// always a date to UTC String
}
dt=urlDate('crrl.gif'); 
if (/Thu, 01 Jan 1970/.test(dt)) dt='Not readable date';
else dt=dt.substr(0,16);
document.getElementById('lgd').innerHTML=dt
</script>
</body>
</html>

Edit : It seems to depend on the server with Opera...

rnd_me

it worked for me in firefox. It's not a complex ajax interaction, it should work on all browsers. Consider using a prefab ajax tool from the likes of jQuery to handle browser inconsistencies.
O would also recommend making it async, i coded it sync for top-down demo simplicity.

your server must emit last-modified headers for any file you want to check. This is not a given, especially for images. Check the headers from the server in firebug before going nuts...

JunkMale

Guys... Hold fire.

The OP states that all they need is the time and the date displayed. No mention of getting this information out of the image's EXIF info, just "A Date" which could be a case of having this as part of the uploaded filename, eg, the timestamp is within the filename.

If the site uses a database, adding a field to store a time stamp of when the file was uploaded would be a good idea but without having a database the options are limited and the simplest option would be to rename the image so it contains partial information that can be decoded on the clients machine in JavaScript or done through the server and no need for a script on the client-side for this "Date" feature.

So my advice would be to tackle this problem from the very start of the chain and examine how the "Upload" portion of this deal works.

gangerolv

Yes, I'm still not getting it.

Basically, I have a wireless camera that sends out an image to the server once every few seconds via FTP. That portion works fine (most of the time). The name of the file is constant "upload.jpg". My website displays this image. The purpose of having the date/time stamp displayed is that I would like know that the camera is still working and sending up-to-date images.

I now have the following 2 sets of codes that work depending on the browser:

The following code displays GMT time for IE 8, Firefox 7 and Opera 11.52. Is there a way to display local time?

<script type="text/javascript">

function LastModUsingHeader(U) {
    var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
    X.open('GET', U, false);
    try{ X.send();}catch(y){}
    var dt=X.getResponseHeader('Last-Modified'); 
    return (dt);
}

dt=LastModUsingHeader('upload.jpg'); 
document.write('1. Image uploaded: ' + dt + "<BR>");

</script>

Using the IFrame works for Firefox (correct timezone) and Opera (GMT). IE displays current time when run from server, but correct time when run locally:

<script type="text/javascript">

var DLM=new Date();

function LastModUsingIFrame() {
   DLM=window.IFrame1.document.lastModified;
   return( DLM );
}

</script>  

<iframe name="IFrame1" width="0" height="0" id="IFrame1" src="upload.jpg">(IFrame not supported)</iframe>

<script type="text/javascript">

dt=LastModUsingIFrame();
document.write('3. Image uploaded: ' + dt + "<BR>");

</script>

It was mentioned that I shouldn't use document.write, but using document.getElementById does not work:

<script type="text/javascript">  

dt=LastModUsingHeader('upload.jpg'); 
document.getElementById('ImageDate').innerHTML=dt;

</script>  

<p>2. Image uploaded: <b id="ImageDate"></b></p>

Thanks again!

JunkMale

The first and most obvious question, have you read the instructions for the web cam because if its like the one I recently demoed it would "Timestamp" each individual frame before upload.

I take it has email and wifi, USB and UTP / LAN access? If so then it should support timestamps natively.

JunkMale

LookHere = WhichOne ? http://php.net/manual/en/function.exif-read-data.php : http://php.net/manual/en/function.filemtime.php ;

007Julien

Two suggestions.
1/ -Document.getElementById('ImageDate') do not work if the element do not exists when the script run ! Then you have to place the script at the end of the body or to insert it in a function to call with a window.onload.

<p>2. Image uploaded: <b id="ImageDate"></b></p>

<script type="text/javascript">  

dt=LastModUsingHeader('upload.jpg'); 
document.getElementById('ImageDate').innerHTML=dt;
</script>

2/- The best way to display local time is to work with a javascript Date to build the date with a return new Date(dt); in the function and a var dtObj=LastModUsingHeader('upload.jpg'); You have all the elements of date like dtObj.getFullYear(); dtObj.getMonth();(de 0 à 11) dtObj.getDate();the date in month dtObj.getFullHours(); Hours, dtObj.getFullMinutes(); and dtObj.getSecond(); than you can build the date. An other way is to use toLocaleString() but the form depends on the browser, country and language... See the methods of the object Date

The form i gave works, on a server, on all modern browsers like IE 8, Mozilla FireFox, Safari for Windows, Opera, Google Chrome (Opera do not works on a local server with EasyPHP)

007Julien

Eureka ! I found how to obtain a date with Opera ...
To avoid that the browser tries to read the image lastModified in the cache, you have only to call

dt=LastModUsingHeader('upload.jpg[COLOR="Red"]?'+Math.random()[/COLOR]); 
// or to modify the function 
function LastModUsingHeader(U) {
    var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
    X.open('GET', U[COLOR="Red"]+'?'+Math.random()[/COLOR], false);
   	try{ X.send();}catch(y){}
  	var dt=X.getResponseHeader('Last-Modified'); 
	return new Date(dt).toLocaletring(); 
}
// to write
<p>Image uploaded: <i id="ImageDate"></i></p>

<script type="text/javascript">
document.getElementById('ImageDate').innerHTML=LastModUsingHeader('upload.jpg'); 
</script>

This could be applied too to the image src...
It would be better to have a DOCTYPE for the page (See W3C) and to display meta tags to control the cache (See this page) to choose a Meta tag...

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

Otherwise the users could have difficulties to update the page...

gangerolv

Thanks to all!

This is the code I'm using and it seems to work for Opera, Firefox and IE. The date/time stamp of a file shows up correctly at local time:


<p>Image uploaded: <i id="getImageDate"></i></p>

<script type="text/javascript">
function LastModUsingHeader(sFile) {
	var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
    X.open('GET', sFile, false);
   	try{ X.send();}
	catch(y){}
  	var dtImage=new Date();
	dtImage = X.getResponseHeader('Last-Modified'); 
	return new Date(dtImage).toLocaleString();
}

document.getElementById('getImageDate').innerHTML=LastModUsingHeader('upload.jpg'); ;

</script>

007Julien

It's could be better to call (See for example this page)

document.getElementById('getImageDate').innerHTML=LastModUsingHeader('upload.jpg[COLOR="Red"]?avoidCache='+Math.random())[/COLOR]);

For me it's do not work with Opera without this addition.