Refresh php image (captcha)

Question

This is a captcha image with a link that will reload the image if the user wants. This code only works in Google Chrome. How to make it work in other browsers?

<img id="captcha" src="captcha.php"> <a id='reload'>Refresh now</a> $('#reload').click(function(){ $('#captcha').attr('src','captcha.php') }) 

Answer 1

Other browsers may cache the image. Try the following:

 $("#captcha").attr("src", "captcha.php?"+(new Date()).getTime()); 

Answer 2

Try this using the caching method (BTW for the href attribute you must set the tag):

 <a id='reload' href='#'>Refresh now</a> $('#reload').click(function(){ var timestamp = new Date().getTime(); $('#captcha').attr('src','captcha.php?'+timestamp) }) 

Answer 3

It could be browser caching. In other words, the browser sees that it has already been downloaded captcha.php , so it does not need to be downloaded again.

Try adding a query string to the image source, which includes the current time. Because the image source will now be a URL that the browser did not load before it tries to reload it.

 <img id="captcha" src="captcha.php"> <a id='reload'>Refresh now</a> $('#reload').click(function(){ $('#captcha').attr('src','captcha.php?' + (new Date()).getTime()); }); 

Even better, set the HTTP headers to captcha.php so that the browser does not cache it.

 <?php // Set headers to NOT cache a page header("Cache-Control: no-cache, must-revalidate"); //HTTP 1.1 header("Pragma: no-cache"); //HTTP 1.0 header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past ?> 

Source: stack overflow

Answer 4

Try the following:

Dom

 <div id="captcha-container"> <img src="captcha.php" id="captcha"> </div> 

JQuery

 $('#reload').click(function() { $('#captcha').remove(); $('#captcha-container').html('<img src="captcha.php" id="captcha">'); }); 

NET Magazine

Each time I click Refresh, a new request is executed.

 GET captcha.php 200 OK 127.0.0.1:80 GET captcha.php 200 OK 127.0.0.1:80 GET captcha.php 200 OK 127.0.0.1:80 

Adding a new img element will restart the browser.

Answer 5

Since all answers still use jQuery , I thought I would put mine, which uses only simple Javascript.

 // Helper function to attach event listener functions to HTML elements. function attach(el, event, fun) { if (el.addEventListener) { el.addEventListener(event, fun); } else { el.attachEvent("on"+event, fun); } } // Find the <a id='reload'> element. var id_reload = document.getElementById("reload"); if (null !== id_reload) { // Find the <img id='captcha'> element. We assume this works, so no check against null. var id_captcha = document.getElementById("captcha"); attach(id_reload, "click", function() { id_captcha.src = "captcha.php?" + (new Date()).getTime(); }); } 

Answer 6

If the src value of the image is the same, the browser will not send a new HTTP request to the server. So change src by adding a useless timestamp.

In javascript browser:

 var capImage = document.getElementById("captcha-image"); capImage.addEventListener("click", function () { capImage.src = "/captcha?timestamp=" + (new Date()).getTime(); }); 

This is a demonstration for captcha image update.

Answer 7

You also need to remove the time reference, because it will always be a concatenation with the previous source URL. You may encounter problems when the user repeatedly clicks on the reset button. Therefore, it’s best to remove the previous timestamp from the URL before adding a new one.

 $('#reload').on('click', function(){ var img=$('#captchaimage'); var src=img.attr('src'); var i=src.indexOf('?dummy='); src=i!=-1?src.substring(0,i):src; d = new Date(); img.attr('src',src+'?dummy='+d.getTime()); });