ASP.NET 一个页上需要显示多个验证码

1、后台获取验证字节流，以字符串的形式返回到前端。

        public ActionResult GetValidateGraphic()
        {
            var validate = new ValidateCode();
            var code = validate.CreateValidateCode(4);
            var image = validate.CreateValidateGraphic(code);
            Session["ValidateCode"] = code;//验证码添加到Session
            return Content(Convert.ToBase64String(image));
        }

2、前台用ajax获取

    ChangeValidateCode: function () {
        $.ajax({
            async: false,
            url: "/Login/GetValidateGraphic",
            success: function (data) {
                $(‘#yxValidateCode‘).attr(‘src‘, ‘data:image/png;base64,‘ + data);
                $(‘#bqfValidateCode‘).attr(‘src‘, ‘data:image/png;base64,‘ + data);
                $(‘#glValidateCode‘).attr(‘src‘, ‘data:image/png;base64,‘ + data);
            }
        });
    }

这样页面上就可以显示多个相同的验证码了。

那么这是什么呢？这是Data URI scheme。URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。

我们可以直接将图片写入到html文件中，这样可以节省一个图片的请求，缺点是浏览器无法缓存此图片。