www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Extract Date and Time Stamp of a file/image

  1. #1
    Join Date
    Nov 2011
    Posts
    4

    Extract Date and Time Stamp of a file/image

    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!

    jp

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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
    Code:
    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.

  3. #3
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    590
    If you can use iframe:
    Code:
    <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;
    }

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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
    Code:
    <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>

  5. #5
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    590
    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.

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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...
    Code:
    <style>
    #IFrame1{position absolute;left:-2000px;top:0;}
    </style>

  7. #7
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    step aside kids, stop messing with iframes and do it right:

    Code:
    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")

  8. #8
    Join Date
    Nov 2011
    Posts
    4
    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

  9. #9
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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
    Code:
    <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...
    Last edited by 007Julien; 11-14-2011 at 05:56 AM. Reason: complement

  10. #10
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    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...

  11. #11
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    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.
    We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
    Code:
    Youre = {
          STILL_not_getting_it:function(){
               alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
          },
          MissingThePoint:function(msg){
                alert("You're missing the point. " + msg);
          }
    }
    Youre.STILL_not_getting_it();

  12. #12
    Join Date
    Nov 2011
    Posts
    4
    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?

    Code:
    <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:

    Code:
    <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:

    Code:
    <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!

  13. #13
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    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.
    We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
    Code:
    Youre = {
          STILL_not_getting_it:function(){
               alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
          },
          MissingThePoint:function(msg){
                alert("You're missing the point. " + msg);
          }
    }
    Youre.STILL_not_getting_it();

  14. #14
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
    Code:
    Youre = {
          STILL_not_getting_it:function(){
               alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
          },
          MissingThePoint:function(msg){
                alert("You're missing the point. " + msg);
          }
    }
    Youre.STILL_not_getting_it();

  15. #15
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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.

    HTML Code:
    <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 &#224; 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)
    Last edited by 007Julien; 11-15-2011 at 04:43 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles