Обновить изображение php (captcha)

Другие браузеры, вероятно, кэшируют изображение. Попробуйте следующее:

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

Попробуйте это, используя метод кэширования (BTW атрибут href должен быть установлен):

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

Попробуй это:

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

Журнал NET

Каждый раз, когда я нажимаю «Обновить», выполняется новый запрос.

 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 

Добавление нового элемента img приведет к перезагрузке браузера.

Это может быть кеширование браузера. Другими словами, браузер видит, что он уже загружен captcha.php поэтому его не нужно загружать снова.

Попробуйте добавить строку запроса в источник изображения, который включает текущее время. Поскольку источник изображения теперь будет URL-адресом, который браузер не загрузил, прежде чем он попытается перезагрузить его.

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

Еще лучше установите HTTP-заголовки на captcha.php чтобы браузер не кэшировал его.

 <?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 ?> 

Источник: https://stackoverflow.com/a/4485194/284685

Поскольку все ответы до сих пор используют jQuery , я думал, что разместил бы мой, который использует только простой 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(); }); } 

Если значение src изображения будет одинаковым, браузер не отправит новый HTTP-запрос на сервер. Поэтому измените src, добавив бесполезную метку времени.

В браузере javascript:

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

Это демо для обновления изображения captcha.

Вам также необходимо удалить временную привязку, потому что она всегда будет конкатенацией с предыдущим URL-адресом источника. вы можете столкнуться с проблемами, когда пользователь нажимает многократно на кнопку перезагрузки. Поэтому лучше удалить предыдущую метку времени с URL-адреса перед добавлением нового.

 $('#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()); });