C#制作登录验证码

后台代码：

 1 public ActionResult VerificationCode()
 2         {
 3             try
 4             {
 5                 int _verificationLength = 4;//密码长度
 6                 int _width = 100, _height = 50;
 7                 SizeF _verificationTextSize;
 8                 Random r = new Random();
 9                 Bitmap _bitmap = new Bitmap(Server.MapPath("~/Common/Texture" + (int)r.Next(0, 3) + ".jpg"), true);//此处用的图片
10                 TextureBrush _brush = new TextureBrush(_bitmap);
11                 //获取验证码
12                 string _verificationText = ValidateCode.VerificationText(_verificationLength);
13                 //存储验证码
14                 Session["VerificationCode"] = _verificationText.ToUpper();
15                 Font _font = new Font("Arial", 14, FontStyle.Bold);
16                 Bitmap _image = new Bitmap(_width, _height);
17                 Graphics _g = Graphics.FromImage(_image);
18                 //清空背景色
19                 _g.Clear(Color.White);
20                 //绘制验证码
21                 _verificationTextSize = _g.MeasureString(_verificationText, _font);
22                 _g.DrawString(_verificationText, _font, _brush, (_width - _verificationTextSize.Width) / 2, (_height - _verificationTextSize.Height) / 2);
23                 _image.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
24                 HttpContext.Response.Write(_image);
25             }
26             catch (Exception)
27             {
28 
29             }
30             return null;
31         }

前端代码：

1 <td>
2    <img src="" class="add-on" id="vcode" title="点击更换验证码" style="float:left;clear:both;line-height:12px;border-radius:4px;" />
3    <a class="span1 pull-left" style="margin-top:4px;" onclick="getValidateCode();">点击图片可更换验证码</a>
4  </td>

JS代码：

function getValidateCode() {
            //获取验证码
            $("img#vcode").attr("src", "/manager/Login/VerificationCode?" + new Date());
            $("img#vcode").click(function () {
                $(this).attr("src", "/manager/Login/VerificationCode?" + new Date());
                $("#vcode").val("");//清空验证码输入框内容
            });
        }

 

posted @ 2017-10-12 13:36  不吃沙琪玛  阅读(2056)  评论(0)  编辑  收藏  举报