重新加载 php 图片（验证码）答案

【问题标题】：Reload php image (captcha)重新加载 php 图片（验证码）
【发布时间】：2012-12-17 02:53:01
【问题描述】：

这是一张带有链接的验证码图片，如果用户需要，该链接会重新加载图片。此代码仅适用于 Google Chrome。如何让它在其他浏览器中运行？

<img id="captcha" src="captcha.php">

<a id='reload'>Refresh now</a>

$('#reload').click(function(){
    $('#captcha').attr('src','captcha.php')
})

【问题讨论】：

标签： php javascript jquery html

【解决方案1】：

如果图片的src保持不变，浏览器不会向服务器发送新的HTTP请求。所以通过添加一个无用的时间戳来更改 src。

在浏览器javascript中：

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

这是一个刷新验证码图片的演示。

【讨论】：

【解决方案2】：

由于到目前为止所有的答案都使用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();
  });
}

【讨论】：

【解决方案3】：

您还需要删除时间戳，因为它始终会与之前的源 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());
});

【讨论】：

【解决方案4】：

不使用缓存方法试试这个（顺便说一句，标签需要设置 href 属性）：

<a id='reload' href='#'>Refresh now</a>




    $('#reload').click(function(){
        var timestamp = new Date().getTime();
        $('#captcha').attr('src','captcha.php?'+timestamp)
    })

【讨论】：

【解决方案5】：

可能是浏览器缓存。换句话说，浏览器看到它已经加载了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

【讨论】：

【解决方案6】：

试试这个：

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">');
});

网络日志

每次我单击重新加载时，都会发出一个新请求。

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 元素会导致浏览器重新加载它。

【讨论】：

【解决方案7】：

其他浏览器可能会缓存图像。请尝试以下操作：

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

【讨论】：