Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    1
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Image Reload Help

    hello im working on my senior design project for my electrical engineering class. and part of the project is to upload an image via php (which ive written and it works great) but when the image is loaded into the same directory as the html file (which is supposed to display the image everytime a new image is uploaded) the image stays the same it doesnt show the new image. but i kno the new image has been uploaded because i can see it my web server. this is the code

    Code:
    <html>
    <head>
    	<title>Human Cam</title>
    	<script type = "text/javascript">
    		function refresh() {
    			var refreshTime = 5*1000;                //5000ms
    			var thisImage = "Lighthouse.jpg";	//the image location
    			var today = new Date(); 		//the current time 
    			//add the time to the end of the image string
    			//to make a unique url:
    	document.images["pic"].src=thisImage+"?"+today;
    	//reload if the images are loaded:
    	if (document.images) {
    	window.onload=refresh;
    	}
    
    	//IF the time is up reload the image
    	t=setTimeout('refresh()', refreshTime);
    	}
      </script>
      </head>
    <body onload="refresh()">
    	<center>
    		<h2>human cam</h2>
    <img src="Lighthouse.jpg" id="pic">
      </center>
    </body>
    </html>

  • #2
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    try encoding the new date, otherwise the unencoded space after the day might not make the url unique until the day actually changes.

    Code:
            <p>
                <img id="myPic" src="pic1.jpg" alt="" />
            </p>
            
            <script type="text/javascript">
                window.onload=function() {
                    var currdate = new Date();
                    currdate = encodeURI(currdate.toString());
                    var imgO = document.getElementById('myPic').src += '?'+currdate;;
                }
            </script>
    Last edited by Mishu; 04-04-2012 at 04:36 AM.

  • Users who have thanked Mishu for this post:

    myelecproject (04-05-2012)

  • #3
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    I concur with the previous reply, but it's more conventional to use the actual time value.

    Code:
    <html>
    <head>
        <title>Human Cam</title>
        <script type = "text/javascript">
        
        function refresh() 
        {                             
          document.images["pic"].src = "Lighthouse.jpg" + "?" + new Date().getTime();
    
          setTimeout('refresh()', 5000 );
        }
      </script>
      </head>
    <body onload="refresh()">
        <center>
            <h2>human cam</h2>
    <img src="Lighthouse.jpg" id="pic">
      </center>
    </body>
    </html>
    Also are you sure that the 'modified' timestamp on the server is as expected and that the case of the filename matches?

  • Users who have thanked Logic Ali for this post:

    myelecproject (04-05-2012)

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The simplest alternative would be:

    Code:
    function refresh() 
        {                             
          document.images["pic"].src = "Lighthouse.jpg" + "?" + new Date().getTime();
         }
    window.onload = function() {setInterval(refresh, 5000 )}
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    myelecproject (04-05-2012)


  •  

    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
    •