图片验证码

1.首先创建一个web窗体，只使用后台部分，生成验证码，并输出图片流跟图片验证码的字符，在使用验证码的窗体中图片控件直接指向这个窗体

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;

public partial class YZM : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //一、引用using System.Drawing;类
        //二、准备画布
        Bitmap img = new Bitmap(60,30);
        //三、往图片上画验证码
        //1、准备绘制类，相当于铺好画布准备绘画
        Graphics g = Graphics.FromImage(img);
        //2、准备绘画的内容与工具
        string all = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";//验证内容
        Random r = new Random();//实例化随机类
        string aa = "";
        for(int i=0;i<4;i++)
        {
            aa += all.Substring(r.Next(all.Length), 1);//随机截取字符组成验证码
        }
        Session["YZM"] = aa;//验证的数据用session传过去，用来在验证码页面后台判断输入的验证码是否相符
        Font f = new Font("微软雅黑",16);//字体格式
        SolidBrush b = new SolidBrush(Color.Green);//准备画刷，括号里写颜色
        //3、绘制验证码
        g.DrawString(aa, f, b, 0, 0);

        //四、输出验证码到页面上
        img.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Png);//数据流，输出格式
        
    }
}

2.图片验证码界面，放一个文本框用来输入验证码，放一个inage图片控件用来显示验证码，放一个按钮用来点击验证码的验证事件，放一个label用来显示验证是否正确（图片空间中图片指向ImageUrl="~/YZM.aspx"）

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PMShtml.aspx.cs" Inherits="PMShtml" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:Image ID="Image1" runat="server" ImageUrl="~/YZM.aspx" /><br />
        <asp:Button ID="Button1" runat="server" Text="验证" /><asp:Label ID="Label1" runat="server" Text="" ForeColor="Red"></asp:Label>
    </div>
    </form>
</body>
</html>
<script type="text/javascript">
    //验证图片的点击事件,点击图片重新换一张图片
    var bb = 0;//点击切换图片时因为图片指向同一个路径，每次点击都会就会相同，设置一个变量拼在传过来的aa后面，变量每次点击都会加1变化
    document.getElementById("Image1").onclick = function () {
        this.setAttribute("src", "yzm.aspx?aa=" + bb );
        bb++;
    }

</script>

验证界面后台，只需要在验证按钮中获取输入的验证码，与session传过来的值进行比对就可以了

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class PMShtml : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Button1.Click += Button1_Click;//验证按钮事件
    }

    //验证按钮开始
    void Button1_Click(object sender, EventArgs e)
    {
        if (Session["YZM"] != null)
        {
            if (TextBox1.Text == Session["YZM"].ToString())
            {
                Label1.Text = "验证成功！";
            }
            else
            {
                Label1.Text = "验证失败！";
            }
        }
    }
    //验证按钮结束
}

posted @ 2016-08-19 22:22 小飛阅读(2029) 评论(0) 编辑收藏举报

刷新页面返回顶部

小飛

图片验证码

公告