今天看到了一个关于使用JSP方式生成图片验证码 的小例子，感觉真的是很不错，拿来分享一下。

原理

对于图片验证码，我们在审查元素的时候会方便的看出是<img src="#" />标签，其指向 的也仅仅是一个资源而已，所以我们既可以为其指定一个链接，也可以使用图片生成的方式实现。那么，今天就来生成吧！

代码

先来看一下门户，Login.html 网页的书写

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>For User Login</title>
</head>
<body>

    <form action="TestCheckCode.jsp" name="login" method="post">

        <table align="center">
            <tr>
                <td align="right">Username:</td>
                <td><input type="text" name="username" value="" size="15" /></td>
            </tr>
            <tr>
                <td align="right">Password:</td>
                <td><input type="password" name="password" value="" size="15" /></td>
            </tr>

            <tr>
                <td align="right">Check Code:</td>
                <td><input type="text" name="checkcode" value="" size="15" />
                    <img alt="" src="getImageCode.jsp"></td>
            </tr>
            <tr>
                <td align="center"><input type="submit" value="Login" size="15" /></td>
                <td><a href="Login.html">Change a Check Code</a></td>
            </tr>

        </table>

    </form>

</body>
</html>

然后是action中对应的那个文件TestCheckCode.jsp，作用不言而喻就是检查验证码是否正确的逻辑了。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>User Login Check</title>
</head>
<body>
    <%
        Object obj = session.getAttribute("SavedCheckCode");
        if (obj == null) {
            response.sendRedirect("/Login.html");
        } else {

            String username = request.getParameter("username");
            String password = request.getParameter("password");
            String checkcode = request.getParameter("checkcode");
            out.println("The Info you typed are:");
            out.println("Username : " + username);
            out.println("Password : " + password);
            out.println("Check Code : " + checkcode);
            if (checkcode.equals(obj)) {
                out.println("Login Success!");
            } else {
                out.println("Login Failed!<br>" + "The true Check Code is " + obj.toString());
            }

            session.removeAttribute("SavedCheckCode");
        }
    %>
</body>
</html>

相信你也看到了，最核心的部分就在于Object obj = session.getAttribute("SavedCheckCode");。这个值是怎么放到session里面的呢？这就要归功于session这个存储域本身强大的特点了。保存了会话期间的所有的信息。好了，下面看一看验证码的生成吧。getImageCode.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.awt.*,java.awt.image.*,javax.imageio.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
    //设置浏览器不缓存图片，这一点还是很有必要的
    response.setHeader("Expires", "0");
    String oldChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789";
    String[] codeChars = new String[5];
    String saveCode = "";
    for(int n = 0 ; n < 5 ; n++) {
        int index = (int)(35* Math.random());
        codeChars[n] = "" + oldChars.charAt(index);
        saveCode += codeChars[n];
    }
    session.setAttribute("SavedCheckCode", saveCode);

    BufferedImage bi = new BufferedImage(80,20,BufferedImage.TYPE_USHORT_555_RGB);
    Graphics g = bi.getGraphics();
    g.setColor(Color.LIGHT_GRAY);
    g.fillRect(0,0,80,20);
    g.setColor(Color.BLACK);
    g.setFont(new Font("Monotype Corsiva",Font.ITALIC,18));
    g.drawString(codeChars[0], 1,15);
    g.drawString(codeChars[1], 16,13);
    g.drawString(codeChars[2], 31,18);
    g.drawString(codeChars[3], 46,14);
    g.drawString(codeChars[4], 61,15);
    g.dispose();

    ByteArrayOutputStream baos = new ByteArrayOutputStream();
    ImageIO.write(bi, "jpeg", baos);
    byte[] imagebyte = baos.toByteArray();

    response.setContentLength(imagebyte.length);
    response.setContentType("image/jpeg");
    ServletOutputStream imgout = response.getOutputStream();
    imgout.write(imagebyte);
    baos.close();
    imgout.close();

%>

这样，每次访问一下Login.html界面的时候都会引起session内验证码值的变化，这样也算是符合了我们的需求了。

关键点

这里面对于JSP部分，重要的其实没什么，就一个session可以作为存储域的特点，而对于生成图片验证码的部分，着实是最重要的了。下面我就来谈谈我对这部分的理解。

首先是先获得图片验证码，这是基础嘛，获得之后存储到我们的session域内，方便之后的取出使用

//设置浏览器不缓存图片，这一点还是很有必要的
    response.setHeader("Expires", "0");
    String oldChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789";
    String[] codeChars = new String[5];
    String saveCode = "";
    for(int n = 0 ; n < 5 ; n++) {
        int index = (int)(35* Math.random());
        codeChars[n] = "" + oldChars.charAt(index);
        saveCode += codeChars[n];
    }
    session.setAttribute("SavedCheckCode", saveCode);

然后就是将获得的这个图片验证码以图片的 方式反馈给客户端对象（也就是Login.html的img标签内的src属性。这样也照应了咱之前说过的用代码生成的方式了不是。这里也是Java基础相关的知识了，代码如下：

BufferedImage bi = new BufferedImage(80,20,BufferedImage.TYPE_USHORT_555_RGB);
    Graphics g = bi.getGraphics();
    g.setColor(Color.LIGHT_GRAY);
    g.fillRect(0,0,80,20);
    g.setColor(Color.BLACK);
    g.setFont(new Font("Monotype Corsiva",Font.ITALIC,18));
    g.drawString(codeChars[0], 1,15);
    g.drawString(codeChars[1], 16,13);
    g.drawString(codeChars[2], 31,18);
    g.drawString(codeChars[3], 46,14);
    g.drawString(codeChars[4], 61,15);
    g.dispose();

    ByteArrayOutputStream baos = new ByteArrayOutputStream();
    ImageIO.write(bi, "jpeg", baos);
    byte[] imagebyte = baos.toByteArray();

    // 设置反馈的类型信息，方便浏览器的解析操作
    response.setContentLength(imagebyte.length);
    response.setContentType("image/jpeg");
    ServletOutputStream imgout = response.getOutputStream();
    imgout.write(imagebyte);
    baos.close();
    imgout.close();

好了，这就算是完成了。使用JSP方式生成图片验证码的好处不仅在于放置用户端JavaScript代码的实效，还能高效的将访问的用户之间以Session的方式区分开来，大大的减轻了代码的逻辑负担，这应该也算是一种比较推崇的方式了吧。希望这次的分享能给看到这篇文章的你一点收获。

当图片验证码遇上JSP的更多相关文章

  1. Webform 文件上传、 C#加图片水印 、 图片验证码

    文件上传:要使用控件 - FileUpload 1.如何判断是否选中文件? FileUpload.FileName - 选中文件的文件名,如果长度不大于0,那么说明没选中任何文件 js - f.val ...

  2. 在linux上使用tomcat服务器图片验证码不显示问题

    背景描述:在liunx系统上,使用tomcat中间件,访问web项目,登录页面的图片验证码显示不出来,但是在window系统上可以正常显示 解决方案:设置一下这个文件tomcat/bin/catali ...

  3. django文件上传、图片验证码、抽屉数据库设计

    1.Django文件上传之Form方式 settings.py, ALLOWED_HOSTS = ['*'] INSTALLED_APPS = [ 'django.contrib.admin', 'd ...

  4. 原生XMLHTTPResponse，jQuery-Ajax 上传文件；iframe上传图片&预览；图片验证码小案例

    原生AJAX Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件) 1.Xml ...

  5. 图片验证码(Struts2中使用)

    写在前面: 最近在项目中做了一个登录页面,用到了图片验证码的功能,所以记录一下.方便之后再有用到,直接拿来用即可.其实图片验证码的生成都是有固定步骤的,网上也有很多的例子,有的时候,如果不想深究,都是 ...

  6. Django（九）下：Ajax操作、图片验证码、KindEditor使用

    三.Ajax操作 ajax操作基于浏览器的xmlHttpRequest对象,IE低版本是另外一个对象,jQuery 1 版本对那两个对象做了封装,兼容性最好,2 .3版本不再支持IE低版本了. Aja ...

  7. Day24-Ajax操作、图片验证码、KindEditor使用-转

    参考源:http://blog.csdn.net/fgf00/article/details/54917439 三.Ajax操作 ajax操作基于浏览器的xmlHttpRequest对象,IE低版本是 ...

  8. JavaWeb开发之普通图片验证码生成技术与算术表达式验证码生成技术

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6134649.html    另:算术验证码生成的JSP.Servlet实现均已移植github:https:/ ...

  9. Python开发【Django】：图片验证码、KindEditor

    图片验证码 生成图片验证码需要以下: session check_code.py(依赖:Pillow,字体文件) 模块安装 pip install Pillow src属性后面加? 在utils下拷贝 ...

随机推荐

  1. Codeforces Round #430 A. Kirill And The Game

    Kirill plays a new computer game. He came to the potion store where he can buy any potion. Each poti ...

  2. [Noi2015]荷马史诗

    来自FallDream的博客,未经允许,请勿转载,谢谢. 追逐影子的人,自己就是影子. ——荷马 Allison 最近迷上了文学.她喜欢在一个慵懒的午后,细细地品上一杯卡布奇诺,静静地阅读她爱不释手的 ...

  3. 深度学习 Fine-tune 技巧总结

    深度学习中需要大量的数据和计算资源(乞丐版都需要12G显存的GPU - -)且需花费大量时间来训练模型,但在实际中难以满足这些需求,而使用迁移学习则能有效 降低数据量.计算量和计算时间,并能定制在新场 ...

  4. mysql 使用问题？

    linux中安装了mysql客户端和服务器端,为什么无法使用,总是报错呢 解决办法:使用dpkg -r mysql命令删除掉mysql-client和mysql-server了,还是不行,而且查看软件 ...

  5. Python中dict的功能介绍

    Dict的功能介绍 1. 字典的两种函数(方法) 1. 字典的内置函数 包含关系 格式:x.__contains__(key)等同于key in x 例如:dic = {'ab':23,'cd':34 ...

  6. C语言程序设计第二次作业--顺序结构

    C语言程序设计第二次作业--顺序结构 1.输出带框文字:在屏幕上输出以下3行信息. ************* Welcome ************* 源程序 #include <stido ...

  7. glusterfs 4.0.1 api 分析笔记1

    一般来说,我们写个客户端程序大概的样子是这样的: /* glfs_example.c */ // gcc -o glfs_example glfs_example.c -L /usr/lib64/ - ...

  8. 将 Hexo 个人博客同时部署到 GitHub 和 Coding 上

    一.将个人博客托管到 GitHub 上 关于如何快速搭建自己的个人博客,如何完善自己的个人博客,什么是 GitHub ,如何将自己的博客代码托管到 GitHub 上面等等问题,我之前写过三篇文章已经做 ...

  9. Lua和C#调用探秘

    转载请标明出处:http://www.cnblogs.com/zblade/ 在实际的项目中,大部分业务逻辑 程序员只需要负责lua层编写逻辑即可,或者在c#层添加一些静态函数,供lua层调用.那么对 ...

  10. ubuntu14.04 python2.7 安装配置OpenCV3.0

    环境:ubuntu14.04  python2.7 内容:安装并配置OpenCV3.0 今天按照OpenCV官网上的步骤装了OpenCV但是,装好之后python提示“No module named ...