图片验证码

最新推荐文章于 2024-09-18 23:11:57 发布

echoHelloWord

最新推荐文章于 2024-09-18 23:11:57 发布

阅读量442

点赞数

分类专栏： php 开发应用文章标签： php img 图片验证码验证码

本文链接：https://blog.csdn.net/echocdzh/article/details/50232997

版权

开发应用同时被 2 个专栏收录

170 篇文章 0 订阅

订阅专栏

php

142 篇文章 0 订阅

订阅专栏

客户端:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>验证码广告</title>
<style type="text/css">
#printCode{display: inline-block; width: 100px; height: 30px; line-height: 30px; background-color: darkgray; color: white; font-size: 14px;font-family: "宋体";font-weight: bolder; cursor: pointer;}
.showCodeBox{width: 200px; height: 150px; border: 4px solid gainsboro; display: none; background-color: #685D48;}
img{margin: 0;}
input{ position:relative;top: -5px; border: 1px solid gray; width: 100px;}
.reload{display: inline-block; width: 16px; height: 16px; padding: 0;margin: 0;cursor: pointer;}
</style>
<script type="text/javascript">
var xmlhttp;
function checkXmlhttp(){
try{
xmlhttp=new XMLHttpRequest(); //用户的浏览器符合 w3c 标准
}catch (e){
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); // ie7
}catch(e){
try{
xmlhttp=new ActiveXObject("microsoft.XMLHTTP");// ie6 一下的
}catch(e){
return false;
}
}
}
}
</script>
</head>
<body>

<span id="printCode" οnclick="_click()">请输入验证码</span>
<div class="showCodeBox" id="showCodeBox">
<img src="images/image1.jpg" width="200" height="130" alt="" title="保暖" id="imgPic">
<input type="text" name="yzmCode" οnblur="checkCode(this.value)" ><span class="reload" οnmοuseοver="changeReloadImg()" οnmοuseοut="outReloadImg()" οnclick="changeImg()"><img src="images/reload.gif" width="16" height="16" id="reloadImg"></span>
</div>

<script type="text/javascript">
var host='http://'+window.location.host;
/**
* 点击显示图片
* @private
*/
var divShowCodeBox=document.getElementById('showCodeBox');
function _click(){
divShowCodeBox.style.display='block';
}
/**
* 改变reload图片
*/
var reloadImg=document.getElementById('reloadImg');
function changeReloadImg(){
reloadImg.src='images/reload_hover.gif';
}
function outReloadImg(){
reloadImg.src='images/reload.gif';
}
//改变图片的src---图片向服务器请求
function changeImg(){
checkXmlhttp();
var url=host+"/yzmAction.php?requrestStatus=yzmPic"+"&"+Math.random();
xmlhttp.open("GET",url,true); //打开通信通道
xmlhttp.onreadystatechange=callImgSrcFunc;//设置回调函数
xmlhttp.send(null);//客户端发送
}
//实现回调函数
var imgPic=document.getElementById('imgPic');
function callImgSrcFunc(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){ //表示客户端准备好接收数据了
var imgInfoJson=xmlhttp.responseText; //接收数据--得到json 格式字符串
var obj = new Function("return" + imgInfoJson)();//利用构造函数实现转换json字符串转换后的JSON对象
imgPic.src=obj.imgSrc; //得到图片地址
imgPic.title=obj.imgKeyword;//得到相对于的keyword的值
}
}
/**
* ajax 检测用户输入的验证码
*/
function checkCode(inputVal){
var imgTitle=imgPic.title;
checkXmlhttp();
var url=host+'/yzmAction.php?titleValue='+decodeURI(imgTitle)+"&keyword="+decodeURI(inputVal)+"&"+Math.random();
xmlhttp.open("GET",url,true); //打开通信通道
xmlhttp.onreadystatechange=callFunc; //设置回调函数方法
xmlhttp.send(null);//客户端发送
}
//实现回调函数
function callFunc(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){ //表示客户端准备好接收数据了
var callReturn=xmlhttp.responseText;
if(callReturn == '1'){
divShowCodeBox.style.display="none";
}else{
changeImg(); //如果没有验证成功就重新刷新图片
}
}
}
</script>
</body>
</html>
服务器端:
<?php
//全局设置
$host='http://'.$_SERVER['HTTP_HOST'].'/';
/**
* 数据格式
*/
$imgData=array(
array('imgSrc'=>$host.'images/image1.jpg','imgKeyword'=>'保暖'),
array('imgSrc'=>$host.'images/image2.jpg','imgKeyword'=>'节约'),
array('imgSrc'=>$host.'images/image3.jpg','imgKeyword'=>'期盼'),
array('imgSrc'=>$host.'images/image4.jpg','imgKeyword'=>'绿色网络'),
array('imgSrc'=>$host.'images/image5.jpg','imgKeyword'=>'爱心'),
array('imgSrc'=>$host.'images/image7.jpg','imgKeyword'=>'下雪天'),
array('imgSrc'=>$host.'images/image8.jpg','imgKeyword'=>'绿色'),
array('imgSrc'=>$host.'images/image9.jpg','imgKeyword'=>'春色')
);
//判断当前的请求是否是请求imgpic
if(isset($_GET['requrestStatus'])){
shuffle($imgData); //打乱数组排序
$key=array_rand($imgData);
echo json_encode($imgData[$key]);
}
//判断客户端是否验证成功，如果验证成功就操作其他的业务
if(isset($_GET['titleValue'])){
$titleValue=addslash(trim($_GET['titleValue']));
$inputVal=addslash(trim($_GET['keyword']));
if($titleValue == $inputVal ){
echo '1';
}
}
/**
* 非法字符过滤
*/
function addslash($str){
if(get_magic_quotes_gpc()){
return $str;
}else{
return addslashes($str);
}
}