最近在项目的登录页面需要实现验证码功能,并且点击验证码图片、用户名密码错误、验证码输入错误等都需要刷新验证码,废话不多说,直接贴代码。
controller层:
@RequestMapping(value="authImage",method=RequestMethod.GET)
public void authImage(HttpSession session, HttpServletResponse response) {
// 禁止图像缓存
response.setHeader("Prama", "no-cache");
response.setHeader("Coche-Control", "no-cache");
response.setDateHeader("Expires", 0);
response.setContentType("image/jpeg");
try {
// 将图像输出到Servelt输出流中
javax.servlet.ServletOutputStream sos = response.getOutputStream();
ByteArrayOutputStream bos = new ByteArrayOutputStream();
VerificationCode verificationCode = new VerificationCode();
BufferedImage bufferedImage = verificationCode.getVerificationImage(80, 25, 18, session, 4);
ImageIO.write(bufferedImage, "jpeg", bos);
byte[] buf = bos.toByteArray();
response.setContentLength(buf.length);
// it can be use like this:bos.writeTo(sos);
sos.write(buf);
bos.close();
sos.close();
} catch (Exception e) {
e.printStackTrace();
}
}
VerificationCode工具类:
public class VerificationCode {
public BufferedImage getVerificationImage(int width, int height, int fontSize, HttpSession session, int verifyCodeSize) {
// 生成由数字和字母随机组成的图片
BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics2D g = buffImg.createGraphics();
Random random = new Random(); //生成一个随机数
g.setColor(Color.BLACK); //设置背景颜色
g.fillRect(0, 0, width, height); //填充一个矩形
Font font = new Font("Arial Black", Font.PLAIN, fontSize);
g.setFont(font); //设置字体
g.setColor(Color.BLUE);
g.drawRect(0, 0, width - 1, height - 1); //绘制边框
g.setColor(Color.BLACK);
// 随机产生100条干扰线,使图像中的认证码不易被其它程序探测到
for (int i = 0; i < 100; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int x1 = random.nextInt(10);
int y1 = random.nextInt(10);
g.drawLine(x, y, x + x1, y + y1);
}
StringBuffer randomCode = new StringBuffer(); //用于保存随机产生的验证码
int red = 0, green = 0, blue = 0;
// 随机产生四位数的验证码
for (int i = 0; i < verifyCodeSize; i++) {
//得到单个验证码
String strRand = String.valueOf(this.getSignCode(random.nextInt()));
//随机生成颜色值,使生成的字符验证码颜色各不相同
red = random.nextInt(200);
green = random.nextInt(200);
blue = random.nextInt(20);
// 用随机产生的颜色将验证码绘制到图像中
g.setColor(new Color(red + 20, green + 20, blue + 200));
g.drawString(strRand, 15 * i + 8, 16);
// 将产生的四个随机字符组合在一起
randomCode.append(strRand);
}
// 将四位数字的验证码保存到Session里面
session.setAttribute(SID.IdentifyingCode, randomCode.toString().toLowerCase());
return buffImg;
}
/**
* 随机生成单个字符
*
* @param num 随机生成的一个整数
* @return 单个数字或字母
*/
public char getSignCode(int num) {
Random random = new Random(); //生成一个随机数
int scope = 0; //设定生成字符的范围,48为数字,65是大写字母
char code = ' '; //随机生成的单个数字或字母
if (num % 2 == 0) { //传递过来的参数是偶数,就生成一个数字
scope = 48;
code = (char) (scope + random.nextInt(10)); //从0到9中随机生成一个数字
} else { //传递过来的参数是奇数,就生成一个字母
scope = 65;
code = (char) (scope + random.nextInt(26)); //随机生成一个大写字母
}
return code;
}
}
html代码
<img id="codeimg" name="codeimg" src="" width="80" height="25"/>
js代码
点击验证码图片刷新验证码,重点是需要带一个随机数的参数,要不然验证码不会刷新。
$('#codeimg').click(function(){
var url = "Controllers/authImage?t="+Math.random();
this.src=url;
}).click().show();
其他的例如用户名密码错误、验证码输入错误重新刷新验证码:
var url = "Controllers/authImage?t="+Math.random();
$("#codeimg").attr("src",url);
alert("输入验证码错误!");
就这样。
参考:http://www.sojson.com/blog/70.html