乘风原创程序

  • ASP.NET ashx实现无刷新页面生成验证码
  • 2020/5/27 16:05:45
  • 现在大部分网站登陆时都会要求输入验证码,在网上也看了一些范例,现在总结一下如何实现无刷新页面生成验证码。

    效果图:

     

    实现方式:

    前台:

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

    JS:

    <script language="javascript" type="text/javascript">
     function ImgChange() 
     { 
     var img=document.getElementById("imgYZ");
     img.click();
     } 
    </script>

    ashx:

    using System;
    using System.Web;
    using CLAIMS.BLL;
    using System.Data;
    using System.Configuration;
    using System.Web.SessionState;
    using System.Drawing;
    
    public class Img : IHttpHandler, IRequiresSessionState
    {
     
     public void ProcessRequest (HttpContext context) 
     {
     context.Response.ContentType = "image/Jpeg";
     
     string s_random = "";
     System.IO.MemoryStream ms = new System.IO.MemoryStream();
     s_random = RndNum(4);
     context.Session["random"] = s_random;
     s_random = s_random.Substring(0, 1) + " " + s_random.Substring(1, 1) + " " + s_random.Substring(2, 1) + " " + s_random.Substring(3, 1);
     
     CreateImage(s_random, ref ms);
     context.Response.ClearContent();
     context.Response.BinaryWrite(ms.ToArray());
    
     context.Response.Flush();
     context.Response.End();
     }
    
     private void CreateImage(string checkCode,ref System.IO.MemoryStream ms)
     {
     int iwidth = (int)(checkCode.Length * 18);
     System.Drawing.Bitmap image = new System.Drawing.Bitmap(iwidth, 45);
     Graphics g = Graphics.FromImage(image);
     g.Clear(Color.White);
     //定义颜色
     Color[] c = { Color.Black, Color.Red, Color.DarkBlue, Color.Green, Color.Orange, Color.Brown, Color.DarkCyan, Color.Purple };
     //定义字体  
     //string[] font = {"Verdana","Microsoft Sans Serif","Comic Sans MS","Arial","宋体"};
     Random rand = new Random();
     //随机输出噪点
     for (int i = 0; i < 50; i++)
     {
      int x = rand.Next(image.Width);
      int y = rand.Next(image.Height);
      g.DrawRectangle(new Pen(Color.LightGray, 0), x, y, 1, 1);
     }
    
     //输出不同字体和颜色的验证码字符
    
     for (int i = 0; i < checkCode.Length; i++)
     {
      int cindex = rand.Next(7);
      int findex = rand.Next(5);
      Font font = new System.Drawing.Font("Arial", 24, (System.Drawing.FontStyle.Bold | System.Drawing.FontStyle.Italic));
      Brush b = new System.Drawing.SolidBrush(c[cindex]);
      int ii = 4;
      if ((i + 1) % 2 == 0)
      {
      ii = 2;
      }
      g.DrawString(checkCode.Substring(i, 1), font, b, 3 + (i * 12), ii);
     }
     //画一个边框
    
     g.DrawRectangle(new Pen(Color.Black, 0), 0, 0, image.Width - 1, image.Height - 1);
    
     //输出到浏览器
     image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
     
     g.Dispose();
     image.Dispose();
     }
    
     public static String RndNum(int VcodeNum)
     {
     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";
     String[] VcArray = Vchar.Split(',');
     String VNum = "";
     Random random = new Random();
     for (int i = 1; i <= VcodeNum; i++)
     {
      int iNum = 0;
      while ((iNum = Convert.ToInt32(VcArray.Length * random.NextDouble())) == VcArray.Length)
      {
      iNum = Convert.ToInt32(VcArray.Length * random.NextDouble());
      }
      VNum += VcArray[iNum];
     }
     return VNum;
     }
     
     public bool IsReusable {
     get {
      return false;
     }
     }
    
    }
    

    备注:

    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方法,从而获取新的验证码】