009. 異步上傳圖片和JQuery中validate的簡單使用介紹

時間 2020-06-29

標籤異步上傳圖片 jquery validate 簡單使用介紹欄目 JQuery 简体版

原文原文鏈接

控制器代碼: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>