Reload php image (captcha)

Question

This is a captcha image with a link that will reload the picture if the user wants. This code works only in Google Chrome. How do I 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

The other browsers probably cache the image. Try the following:

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

Answer 2

Try this using no caching method (BTW a tag need href attribute to be set):

<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 already loaded captcha.php so it does not need to load it again.

Try appending a query string to the image source that includes the current time. Since the image source will now be a URL that the browser has not loaded before it will try 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());
});

Better yet, set the HTTP headers on captcha.php to ensure the browser will 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: https://stackoverflow.com/a/4485194/284685

Answer 4

Try this:

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 Log

Each time I click Reload, a new request is made.

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 in a new img element will cause the browser to reload it.

Answer 5

Since all the answers so far use jQuery , I thought I'd post mine which uses only plain 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 of the image keep the same, the browser won't send a new HTTP request to the server. So change the src by adding a useless timestamp.

In browser javascript:

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

This is a demo for refresh captcha image.

Answer 7

You also need to remove the timestap because it will always concatenate with the previous source url. you might run into problems when a user clicks many times on the reload button. So it is better to remove the previous timestamp from the url before appending 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());
});