实现:随机生成四位数字的验证码,点击验证码可无刷新生成新的验证码,最后点击按钮进行检验
PS:本实例使用UpdatePanel实现无刷新。
前台代码:
<asp:ScriptManager ID="ScriptManager1" runat="server" ></asp:ScriptManager> 页面加载时间:<asp:Label ID="Label1" runat="server" Text=""></asp:Label> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div> 请输入验证码:<asp:TextBox ID="TextBox1" runat="server" Width="50px"></asp:TextBox> <asp:ImageButton ID="btnImage" runat="server" ImageAlign="AbsMiddle" OnClick="btnImage_Click" /> <asp:Label ID="Label2" runat="server" Text=""></asp:Label> <asp:HiddenField ID="hidImgVal" runat="server" /> </div> <div> <input type="button" value="检验" onclick="document.getElementById('hidImgVal').value == document.getElementById('TextBox1').value ? alert('验证通过') : alert('验证码不正确');" /> </div> </ContentTemplate> <Triggers><asp:AsyncPostBackTrigger ControlID="btnImage" EventName="Click"></asp:AsyncPostBackTrigger></Triggers> </asp:UpdatePanel>
后台代码:
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { CreateCheckCodeImage(55, 22); this.Label1.Text = DateTime.Now.ToString(); } } //生成四位随机字符 private string CreateCheckCodeString() { char[] allCharArray = { '0','1','2','3','4','5','6','7','8','9' }; string randomCode = ""; Random rd = new Random(); for (int i = 0; i < 4; i++) { randomCode += allCharArray[rd.Next(allCharArray.Length)]; } return randomCode; } public void CreateCheckCodeImage(int iWidth, int iHeight) { Random rand = new Random(); Bitmap image = new Bitmap(iWidth, iHeight);//创建一个指定宽高的位图 Graphics g = Graphics.FromImage(image);//将位图放入画图板 g.Clear(ColorTranslator.FromHtml("#F0F0F0"));//清除画图板底色并填充新的颜色 //随机2条横向干扰线 for (int i = 0; i < 3; i++) { Pen pen1 = new Pen(Color.FromArgb(255, rand.Next(255), rand.Next(255), rand.Next(255)), 0);//干扰线1 Point p1 = new Point(0, rand.Next(iHeight));//横线起点 Point p2 = new Point(iWidth, rand.Next(iHeight));//横线终点 g.DrawLine(pen1, p1, p2); } //随机4条纵向干扰线 for (int i = 0; i < 6; i++) { Pen pen2 = new Pen(Color.FromArgb(255, rand.Next(255), rand.Next(255), rand.Next(255)), 0);//干扰线2 Point p1 = new Point(rand.Next(iWidth), 0);//横线起点 Point p2 = new Point(rand.Next(iWidth), iHeight);//横线终点 g.DrawLine(pen2, p1, p2); } //随机字符转为图片 Font font = new Font("华文彩云", 12, FontStyle.Bold);//字体 SolidBrush brush = new SolidBrush(Color.Red);//颜色 Rectangle rect = new Rectangle(5, 2, iWidth, iHeight);//文字区域 string code = CreateCheckCodeString(); this.hidImgVal.Value = code; g.DrawString(code, font, brush, rect); //保存验证图 string path = HttpContext.Current.Server.MapPath("."); string imgName = "img" + code + ".jpg"; image.Save(path + @"img4_5" + imgName, ImageFormat.Jpeg); this.btnImage.ImageUrl = "~/img/4_5/" + imgName; //释放对象 g.Dispose(); image.Dispose(); } protected void btnImage_Click(object sender, ImageClickEventArgs e) { //删除文件 string path = HttpContext.Current.Server.MapPath("."); string imgName = "img" + this.hidImgVal.Value + ".jpg"; if (File.Exists(path + @"img4_5" + imgName)) { File.Delete(path + @"img4_5" + imgName); } CreateCheckCodeImage(55, 22); this.Label2.Text = DateTime.Now.ToString(); }
遗留问题:
虽然功能实现,但图片保存使用了动态路径,原因是静态路径无法实现刷新,所以会有日益增加的验证图文件。
但是想想,如果可以使用静态路径,那么100个用户同时读取该验证图会有什么结果?
看来较好的方式是将缩略图存放在客户端:)
网上有一种使用MemoryStream来存放验证图:
System.IO.MemoryStream ms = new System.IO.MemoryStream(); image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg); Response.ClearContent(); Response.ContentType = "image/Jpeg"; Response.BinaryWrite(ms.ToArray());
但不知道怎么传给图片的路径,这里请大师指点。