Ajax动态刷新验证码图片
一》 原理:
把用代码生成的图片存放到硬盘当中,然后在返回存储路径把图片通过图片标签的 src 属性 自动加载到浏览器中
二》 步骤
1. 首先用GDI+ 绘图 把验证码图片给绘制出来
2. 然后提前判断硬盘里是否有已生成的图片,如果有,则删除,以避免节省硬盘空间
3. 把生成的验证码存放到 Session 会话当中,以供前台验证 填写验证码的准确性, 在构建文件路径,把验证码图片存入路径中
4. 想前台返回路径
三》 代码实例如下
Identifying.html 代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>验证码实验</title>
<script src="jquery-1.4.1.js"></script>
</head>
<body>
验证码:
<div>
<img src="" id="tp"/><a href="javascript:void(0)" id="huan">看不清换一张</a>
</div>
<script type="text/javascript">
$(function () {
function xx() {
$.ajax({
url: 'Identif.ashx',
type: 'POST',
datatype: 'text',
success: function (data) {
$("#tp").attr("src", data.toString());
}
});
};
xx();
$("#huan").click(xx);
});
</script>
</body>
</html>
Identif.ashx 代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Drawing;
using System.Web.SessionState; namespace FourmWeb.Identifying
{
/// <summary>
/// Identif 的摘要说明
/// </summary>
public class Identif : IHttpHandler,IRequiresSessionState
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";//响应报文主体的类型 string path = context.Request.MapPath("~/"); ;
Bitmap map = new Bitmap(, ); //创建位图文件
Graphics g = Graphics.FromImage(map); //画布 //填充背景颜色
g.FillRectangle(Brushes.White, , , , ); //随机产生验证码
string code = null;
Random re = new Random(Guid.NewGuid().GetHashCode()); //用哈希数做随机种子
for(int i = ; i < ; i++)
{
if (re.Next(, ) % == )
{
code += re.Next(, ).ToString();
}
else
{
code+= (Char)re.Next(, );
}
} //删除已存在的文件
if (context.Session["code"] != null)
File.Delete(path + context.Session["code"].ToString() + ".jpg"); //构建文件路径
path += code + ".jpg"; context.Session["code"] = code; //将验证码画到画布上
g.DrawString(code, new Font("宋体", ), Brushes.Gray, new PointF(, ));
//绘制干扰点
Random random = new Random();
for (int i = ; i<; i++)
{
map.SetPixel(random.Next(, ), random.Next(, ), Color.LightGray);
} //输出图像
map.Save(path); //发送相对路径
context.Response.Write("../"+code+".jpg"); context.Response.End(); } public bool IsReusable
{
get
{
return false;
}
}
}
}
Ajax动态刷新验证码图片的更多相关文章
- Django(九)下:Ajax操作、图片验证码、KindEditor使用
三.Ajax操作 ajax操作基于浏览器的xmlHttpRequest对象,IE低版本是另外一个对象,jQuery 1 版本对那两个对象做了封装,兼容性最好,2 .3版本不再支持IE低版本了. Aja ...
- Servlet实现验证码图片(一)
Servlet实现数字字母验证码图片(一): 生成验证码图片主要用到了一个BufferedImage类,如下:
- SpringMVC生成的验证码图片不显示
近期用SSM框架写一个项目,登录模块需要生成验证码图片,我把相关的代码写好了之后传到 jsp ,但是图片不显示,查看控制台显示404,反复查询了一下代码并没有发现任何问题,代码如下: @Control ...
- Struts2 验证码图片实例
本文转载于DongLiYang的博客http://www.cnblogs.com/dongliyang/archive/2012/08/24/2654431.html 其中修改过一部分,针对使用注解而 ...
- java web学习总结(九) -------------------通过Servlet生成验证码图片
一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下:
- android 生成验证码图片
(转自:http://blog.csdn.net/onlyonecoder/article/details/8231373) package com.nobeg.util; import java.u ...
- delphi WebBrowser控件上网页验证码图片识别教程(一)
步骤一:获取网页中验证码图片的url地址 在delphi中加入一个BitBtn和一个memo以及WebBrowser控件实现网页中验证码图片的url地址的获取 程序如下:procedure TForm ...
- 学习笔记:利用GDI+生成简单的验证码图片
学习笔记:利用GDI+生成简单的验证码图片 /// <summary> /// 单击图片时切换图片 /// </summary> /// <param name=&quo ...
- JavaWeb---总结(九)通过Servlet生成验证码图片
一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下: 创建一个DrawImage Servlet,用来生成验证码图片 1 package gacl. ...
随机推荐
- sqlalchemy--group_concat的使用
今天,一个app客户端同事需要我服务器端提供一组数据,这组数据要按类分好,把整个结构都展示给他,他直接使用就可以了.数据大概如下面这种: 同事需要的结构大概就是类型1有多少,分别是什么;类型2有多少, ...
- 怎么看时序图--nand flash的读操作详解(转载)
出处:http://blog.chinaunix.net/uid-28852942-id-3992727.html这篇文章不是介绍 nand flash的物理结构和关于nand flash的一些基本知 ...
- jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)
最近把一个项目的jQuery升级到最新版,发现有些页面报错Cannot read property 'msie' of undefined.上jQuery网站上搜了一下,原因是$.browser这个a ...
- 转:virtualbox+ubuntu设置共享文件夹
1. 进入系统,安装增强功能,安装完关闭系统. 2. 在E盘下创建一个共享文件夹 gongxiang. 3. 设置->数据空间->固定分配,选择共享文件 ...
- 转:堆(heap)和栈(stack)有什么区别??
简单的可以理解为: heap:是由malloc之类函数分配的空间所在地.地址是由低向高增长的. stack:是自动分配变量,以及函数调用的时候所使用的一些空间.地址是由高向低减少的. 预备知识—程序的 ...
- QT的文本加密方法(寒山居士)
http://blog.csdn.net/esonpo/article/details/12746315http://blog.csdn.net/esonpo/article/details/1174 ...
- 数据采集工具flume
概述 flume是在2011年被首次引入到Cloudera的CDH3分发中,2011年6月,Cloudera将flume项目捐献给Apache基金会.2012年,flume项目从孵化器变成了顶级项目, ...
- redis报错
网站登录异常,redis数据不能写!解决方法汇总! redis---flushdb ###提示如下错误 ###flushall 清空说有数据,所有库 (error) ...
- 【MySQL】关于MySQL错误日志信息的收集
为方便维护MySQL,写了个脚本用以提供收集错误信息的接口.这些错误信息来自与MySQL错误日志,而 通过grep mysql可以获取error-log的路径. #!/usr/bin/env pyth ...
- Xcode7真机测试
根据这个网址上的步骤能够完成真机测试,我已经试过了,还不错 http://www.bubuko.com/infodetail-1061938.html