009. 异步上传图片和JQuery中validate的简单使用介绍

时间 2020-06-29 标签 009 异步上传图片 jquery 中 validate 简单使用介绍

控制器代码:javascript

public ActionResult ImageUpload()
        {
            return View();
        }

        public ActionResult ProImageUpload()
        {
            //获得上传图片的文件
            var file = Request.Files["imgFile"];
            string filePath = "/images/"+Guid.NewGuid().ToString()+file.FileName;

            file.SaveAs(Request.MapPath(filePath));

            return  Content(filePath);
        }

前台代码:html

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery-1.8.0.js"></script>
    <script src="~/Scripts/MyAjaxForm.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#btnSub").click(function () {
                $("#frm").ajaxSubmit({
                    url: "/Ajax/ProImageUpload",
                    type: "post",
                    success: afterUpload
                });

                return false;
            });
        });


        function afterUpload(data) {
            alert(data);
            $("#result").html("<img src='" + data + "'/>");
        }
    </script>
    <title>ImageUpload</title>
</head>
<body>
    <div>
        <form action="/Ajax/ProImageUpload" method="post" enctype="multipart/form-data" id="frm">
            <input type="file" id="img" name="imgFile" />
            <input type="submit" id="btnSub" value="图片异步上传示例" />

        </form>
        888888888888888888888888888888888888888
        <div id="result"></div>
    </div>
</body>
</html>

JQuery的validate的简单使用介绍, 更详细的参见 http://www.runoob.com/jquery/jquery-plugin-validate.htmljava

<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery-1.8.0.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script type="text/javascript">
        $(function () {
           //标签形式获取
            $("form").validate({
                
                rules: {
                    BookName: { required: true, maxlength: 5, minlength: 2 },
                    BookAuth:{required:true,number:true }
                }, messages: {
                    //BookName:"*必填"  这是一种写法
                    BookName: {required:"*", maxlength:"*最大5个字符"}
                }
            });
        });
    </script>
    <title>Create</title>