今天看到了一个关于使用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. Educational Codeforces Round 17F Tree nesting

    来自FallDream的博客,未经允许,请勿转载, 谢谢. 给你两棵树,一棵比较大(n<=1000),一棵比较小(m<=12) 问第一棵树中有多少个连通子树和第二棵同构. 答案取膜1e9+ ...

  2. hdu 5534（dp）

    Input The first line contains an integer T indicating the total number of test cases. Each test case ...

  3. C# 导入excel报错 ：不是预期外部表

    错误原因:由于Excel 97-2003的连接格式与Excel 2010 的 不同造成. 解决方案1: 很多人换了2010后,问的最多的问题之一是2003里最经典的ADO中的“provider=Mic ...

  4. Linux下如何进入中文目录

    给Linux安装图形用户界面之后,会在工作目录中生成图片, 文档, 下载........等中文目录,以前不知道如何进入这些目录,感觉也没有必要,今天在火狐上下载了一个软件,默认在下载这个目录当中,实在 ...

  5. 在浏览器中运行Keras模型，并支持GPU

    Keras.js 推荐一下网页上的 demo https://transcranial.github.io/keras-js/#/ 加载的比较慢,但是识别的非常快. Run Keras models ...

  6. mysql insert插入时实现如果数据表中主键重复则更新，没有重复则插入的四种方法

    [CSDN下载] Powerdesigner 设计主键code不能重复等问题 [CSDN博客] Oracle中用一个序列给两个表创建主键自增功能的后果 [CSDN博客] MySQL自增主键删除后重复问 ...

  7. HTML入门知识

    B/S:浏览器-服务器 C/S:客户端-服务器 更新麻烦 管理麻烦 PHP:基于BS结构进行项目开发的语言 ====================HTML:超文本标记语言 -- 控制网面内容CSS: ...

  8. centos 7 x64 搭建 elasticsearch 服务

    1.确认服务是否已经安装java 8 环境 使用 java -version 查看 2.在java 官网下载安装包,然后上传到服务器响应的文件中 3.使用 tar -zxvf 文件夹 解压到响应的文件 ...

  9. 网络协议 finally{ return问题 注入问题 jdbc注册驱动问题 PreparedStatement 连接池目的 1.2.1DBCP连接池 C3P0连接池 MYSQL两种方式进行实物管理 JDBC事务 DBUtils事务 ThreadLocal 事务特性 并发访问 隔离级别

    1.1.1 API详解:注册驱动 DriverManager.registerDriver(new com.mysql.jdbc.Driver());不建议使用 原因有2个: >导致驱动被注册2 ...

  10. Android POJO 转换器 —> RapidOOO

    博客搬迁至https://blog.wangjiegulu.com RSS订阅:https://blog.wangjiegulu.com/feed.xml 原文链接:https://blog.wang ...