PHPLaravel框架中验证码点击无法刷新
验证码无法点击刷新兼容解决方案
关键部分
我们先看这段代码关键部分
<li>
<input type="text" class="code" name="code"/>
<span><i class="fa fa-check-square-o"></i></span>
<img src="{{url('admin/code')}}" alt="" onclick="this.src='{{url('admin/code')}}'">
</li>
这段代码在谷歌和360浏览器中是可以正常发挥作用的,鼠标点击验证码图片位置即可刷新更换验证码,而在火狐和兼容之星IE浏览器中却怎么点也无法刷新.
这是因为浏览器认为你点击后,请求地址并没有变化,所以没有进行刷新.
这时候可以添加一个随机函数在后面,欺骗浏览器,让它觉得每次点击请求地址都不一样!
修改代码如下 ↓
<li>
<input type="text" class="code" name="code"/>
<span><i class="fa fa-check-square-o"></i></span>
<img src="{{url('admin/code')}}" alt="" onclick="this.src='{{url('admin/code')}}?'+Math.random()">
</li>
现在可以兼容每个浏览器实现点击刷新验证码了!
其他位置配置
routes.php ↓
Route::group(['middleware' => ['web']], function () {
Route::get('/', function () {
return view('welcome');
});
Route::get('admin/login','Admin\LoginController@login');
Route::get('admin/code','Admin\LoginController@code');
Route::get('admin/getcode','Admin\LoginController@getcode');
});
LoginController.php ↓
<?php
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Requests;
require_once 'org/code/Code.class.php';
class LoginController extends CommonController
{
public function login()
{
return view('admin.login');
}
public function code()
{
$code = new \Code;
$code->make();
}
public function getcode()
{
$code = new \Code;
echo $code->get();
}
}
login.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/admin/style/css/ch-ui.admin.css">
<link rel="stylesheet" href="/admin/style/font/css/font-awesome.min.css">
</head>
<body style="background:#F3F3F4;">
<div class="login_box">
<h1>Blog</h1>
<h2>欢迎使用博客管理平台</h2>
<div class="form">
<p style="color:red">用户名错误</p>
<form action="#" method="post">
<ul>
<li>
<input type="text" name="username" class="text"/>
<span><i class="fa fa-user" value=""></i></span>
</li>
<li>
<input type="password" name="password" class="text"/>
<span><i class="fa fa-lock"></i></span>
</li>
<li>
<input type="text" class="code" name="code"/>
<span><i class="fa fa-check-square-o"></i></span>
<img src="{{url('admin/code')}}" alt="" onclick="this.src='{{url('admin/code')}}?'+Math.random()">
</li>
<li>
<input type="submit" value="立即登陆"/>
</li>
</ul>
</form>
<p><a href="#">返回首页</a> © 2016 Powered by <a href="http://www.houdunwang.com" target="_blank">http://www.houdunwang.com</a></p>
</div>
</div>
</body>
</html>
二维码源码(模板)
<?php
class Code{
//资源
private $img;
//画布宽度
private $width=100;
//画布高度
private $height=30;
//背景颜色
private $bgColor='#ffffff';
//验证码
private $code;
//验证码的随机种子
private $codeStr='23456789abcdefghjkmnpqrstuvwsyz';
//验证码长度
private $codeLen=4;
//验证码字体
private $font;
//验证码字体大小
private $fontSize=16;
//验证码字体颜色
private $fontColor='';
public function __construct() {
}
//创建验证码
public function make()
{
if(empty($this->font))
{
$this->font = __DIR__.'/consola.ttf';
}
$this->create();//生成验证码
header("Content-type:image/png");
imagepng($this->img);
imagedestroy($this->img);
exit;
}
//设置字体文件
public function font($font)
{
$this->font= $font;
return $this;
}
//设置文字大小
public function fontSize($fontSize)
{
$this->fontSize=$fontSize;
return $this;
}
//设置字体颜色
public function fontColor($fontColor)
{
$this->fontColor = $fontColor;
return $this;
}
//验证码数量
public function num($num)
{
$this->codeLen=$num;
return $this;
}
//设置宽度
public function width($width)
{
$this->width = $width;
return $this;
}
//设置高度
public function height($height)
{
$this->height = $height;
return $this;
}
//设置背景颜色
public function background($color)
{
$this->bgColor = $color;
return $this;
}
//返回验证码
public function get() {
return $_SESSION['code'];
}
//生成验证码
private function createCode() {
$code = '';
for ($i = 0; $i < $this->codeLen; $i++) {
$code .= $this->codeStr [mt_rand(0, strlen($this->codeStr) - 1)];
}
$this->code = strtoupper($code);
$_SESSION['code'] = $this->code;
}
//建画布
private function create() {
if (!$this->checkGD())
return false;
$w = $this->width;
$h = $this->height;
$bgColor = $this->bgColor;
$img = imagecreatetruecolor($w, $h);
$bgColor = imagecolorallocate($img, hexdec(substr($bgColor, 1, 2)), hexdec(substr($bgColor, 3, 2)), hexdec(substr($bgColor, 5, 2)));
imagefill($img, 0, 0, $bgColor);
$this->img = $img;
$this->createLine();
$this->createFont();
$this->createPix();
$this->createRec();
}
//画线
private function createLine(){
$w = $this->width;
$h = $this->height;
$line_color = "#dcdcdc";
$color = imagecolorallocate($this->img, hexdec(substr($line_color, 1, 2)), hexdec(substr($line_color, 3, 2)), hexdec(substr($line_color, 5, 2)));
$l = $h/5;
for($i=1;$i<$l;$i++){
$step =$i*5;
imageline($this->img, 0, $step, $w,$step, $color);
}
$l= $w/10;
for($i=1;$i<$l;$i++){
$step =$i*10;
imageline($this->img, $step, 0, $step,$h, $color);
}
}
//画矩形边框
private function createRec() {
//imagerectangle($this->img, 0, 0, $this->width - 1, $this->height - 1, $this->fontColor);
}
//写入验证码文字
private function createFont() {
$this->createCode();
$color = $this->fontColor;
if (!empty($color)) {
$fontColor = imagecolorallocate($this->img, hexdec(substr($color, 1, 2)), hexdec(substr($color, 3, 2)), hexdec(substr($color, 5, 2)));
}
$x = ($this->width - 10) / $this->codeLen;
for ($i = 0; $i < $this->codeLen; $i++) {
if (empty($color)) {
$fontColor = imagecolorallocate($this->img, mt_rand(50, 155), mt_rand(50, 155), mt_rand(50, 155));
}
imagettftext($this->img, $this->fontSize, mt_rand(- 30, 30), $x * $i + mt_rand(6, 10), mt_rand($this->height / 1.3, $this->height - 5), $fontColor, $this->font, $this->code [$i]);
}
$this->fontColor = $fontColor;
}
//画线
private function createPix() {
$pix_color = $this->fontColor;
for ($i = 0; $i < 50; $i++) {
imagesetpixel($this->img, mt_rand(0, $this->width), mt_rand(0, $this->height), $pix_color);
}
for ($i = 0; $i < 2; $i++) {
imageline($this->img, mt_rand(0, $this->width), mt_rand(0, $this->height), mt_rand(0, $this->width), mt_rand(0, $this->height), $pix_color);
}
//画圆弧
for ($i = 0; $i < 1; $i++) {
// 设置画线宽度
imagearc($this->img, mt_rand(0, $this->width), mt_rand(0, $this->height), mt_rand(0, $this->width), mt_rand(0, $this->height)
, mt_rand(0, 160), mt_rand(0, 200), $pix_color);
}
imagesetthickness($this->img, 1);
}
//验证GD库
private function checkGD() {
return extension_loaded('gd') && function_exists("imagepng");
}
}