ASP.NET ashx实现无刷新页面生成验证码

Posted 2020-07-19 AnneHan

现在大部分网站登陆时都会要求输入验证码，在网上也看了一些范例，现在总结一下如何实现无刷新页面生成验证码。

效果图：

 

实现方式：

前台：

1 <div>
2     <span>Identifying Code:</span>
3     <asp:TextBox ID="txtValidationCode" runat="server" Width="130px" MaxLength="4"></asp:TextBox>
4     <img id="imgYZ" class="code" style=" height:23px; width:65px;" 
5         src="Img.ashx" onclick="this.src=this.src+\'?\'"/ />
6     <img src="../images/btn_change.gif" title="Change" class="btn_change" Style="cursor: hand"
7         onclick="ImgChange()" />
8 </div>

JS：

1 <script language="javascript" type="text/javascript">
2     function ImgChange()  
3     {  
4         var img=document.getElementById("imgYZ");
5         img.click();
6     }   
7 </script>

ashx:

  1 <%@ WebHandler Language="C#" Class="Img" %>
  2 
  3 using System;
  4 using System.Web;
  5 using CLAIMS.BLL;
  6 using System.Data;
  7 using System.Configuration;
  8 using System.Web.SessionState;
  9 using System.Drawing;
 10 
 11 public class Img : IHttpHandler, IRequiresSessionState
 12 {
 13     
 14     public void ProcessRequest (HttpContext context) 
 15     {
 16         context.Response.ContentType = "image/Jpeg";
 17         
 18         string s_random = "";
 19         System.IO.MemoryStream ms = new System.IO.MemoryStream();
 20         s_random = RndNum(4);
 21         context.Session["random"] = s_random;
 22         s_random = s_random.Substring(0, 1) + " " + s_random.Substring(1, 1) + " " + s_random.Substring(2, 1) + " " + s_random.Substring(3, 1);
 23         
 24         CreateImage(s_random, ref ms);
 25         context.Response.ClearContent();
 26         context.Response.BinaryWrite(ms.ToArray());
 27 
 28         context.Response.Flush();
 29         context.Response.End();
 30     }
 31 
 32     private void CreateImage(string checkCode,ref System.IO.MemoryStream ms)
 33     {
 34         int iwidth = (int)(checkCode.Length * 18);
 35         System.Drawing.Bitmap image = new System.Drawing.Bitmap(iwidth, 45);
 36         Graphics g = Graphics.FromImage(image);
 37         g.Clear(Color.White);
 38         //定义颜色
 39         Color[] c = { Color.Black, Color.Red, Color.DarkBlue, Color.Green, Color.Orange, Color.Brown, Color.DarkCyan, Color.Purple };
 40         //定义字体            
 41         //string[] font = {"Verdana","Microsoft Sans Serif","Comic Sans MS","Arial","宋体"};
 42         Random rand = new Random();
 43         //随机输出噪点
 44         for (int i = 0; i < 50; i++)
 45         {
 46             int x = rand.Next(image.Width);
 47             int y = rand.Next(image.Height);
 48             g.DrawRectangle(new Pen(Color.LightGray, 0), x, y, 1, 1);
 49         }
 50 
 51         //输出不同字体和颜色的验证码字符
 52 
 53         for (int i = 0; i < checkCode.Length; i++)
 54         {
 55             int cindex = rand.Next(7);
 56             int findex = rand.Next(5);
 57             Font font = new System.Drawing.Font("Arial", 24, (System.Drawing.FontStyle.Bold | System.Drawing.FontStyle.Italic));
 58             Brush b = new System.Drawing.SolidBrush(c[cindex]);
 59             int ii = 4;
 60             if ((i + 1) % 2 == 0)
 61             {
 62                 ii = 2;
 63             }
 64             g.DrawString(checkCode.Substring(i, 1), font, b, 3 + (i * 12), ii);
 65         }
 66         //画一个边框
 67 
 68         g.DrawRectangle(new Pen(Color.Black, 0), 0, 0, image.Width - 1, image.Height - 1);
 69 
 70         //输出到浏览器
 71         image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
 72         
 73         g.Dispose();
 74         image.Dispose();
 75     }
 76 
 77     public static String RndNum(int VcodeNum)
 78     {
 79         String Vchar = "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,W,X,Y,Z";
 80         String[] VcArray = Vchar.Split(\',\');
 81         String VNum = "";
 82         Random random = new Random();
 83         for (int i = 1; i <= VcodeNum; i++)
 84         {
 85             int iNum = 0;
 86             while ((iNum = Convert.ToInt32(VcArray.Length * random.NextDouble())) == VcArray.Length)
 87             {
 88                 iNum = Convert.ToInt32(VcArray.Length * random.NextDouble());
 89             }
 90             VNum += VcArray[iNum];
 91         }
 92         return VNum;
 93     }
 94  
 95     public bool IsReusable {
 96         get {
 97             return false;
 98         }
 99     }
100 
101 }

View Code

 

备注：

onclick="this.src=this.src+\'?\'"

之前一直不明白为什么要加一个？号，于是去网上搜索，参考一下前辈们的见解：

【这是表示当前图片链接，在当前链接值的基础上添加了一个问号
譬如当前src="check.aspx",点击后就变成了"check.aspx?",继续点就会变成"check.aspx?????"
这个问号是没有实际意义的,它唯一的作用是向IE表明: 图片链接发生了变化,图片需要刷新.】

【GET：当客户端要从服务器中读取文档时，使用GET方法。GET方法要求服务器将URL定位的资源放在响应报文的数据部分，回送给客户端。使用GET方法时，请求参数和对应的值附加在URL后面，利用一个问号（“?”）代表URL的结尾与请求参数的开始，传递参数长度受限制。例如，/index.jsp?id=100&op=bind。
POST：当客户端给服务器提供信息较多时可以使用POST方法。POST方法将请求参数封装在HTTP请求数据中，以名称/值的形式出现，可以传输大量数据。
this.src=this.src+\'?\'是将this.src原值后加上？，以便向服务器发送一个新的GET方法，从而获取新的验证码】

 

感恩前辈们的分享，我会向你们学习，把分享的精神传递给身边更多的人。