[MVC]使用jquery.form.js 异步上传文件

尝试用了using (Ajax.BeginForm(...但是没成功 = = enctype="multipart/form-data"属性一直不起作用，只好转战jQuery插件惹。

使用方法：

1.新建一个ajax控制器，创建两个函数，一个返回视图，一个返回图片地址

       　public ActionResult ImageLoad()
        {
            return View();
        }
        [HttpPost]
        public ActionResult ProcessImageLoad()
        {
            if (Request.Files.Count > 0)
            {
                var file = Request.Files["imgFile"];
                string path = "/Upload/" + Guid.NewGuid().ToString() + file.FileName;
                file.SaveAs(Request.MapPath(path));
                return Content(path);
            }
            return View();
        } 

2.在视图页调用jQuery和jQuery.form的js，添加form、两个input，input一个用于选择文件，一个用于异步上传。再添加个id =result的div用于显示上传的结果。

<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/jquery.form.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            console.log("a");
            $("#formID").ajaxSubmit({
                    url: "@Url.Action("ProcessImageLoad", "Ajax")",
                    type: "Post",
                    success: function (data) {
                        $("#result").html("<img src='" + data + "' />");
                    },
                    error: function () {
                        alert("error");
                    }
                });
        });
    });

</script>
 
<form id="formID" method="post" enctype="multipart/form-data">
    <input type="file" id="fileupload" name="imgFile" />
    <input type="button" value="上传" id="btn">
</form>
<div id="result"></div>

如果你也用.net mvc框架，复制就可以用惹~~

成功后的效果：（上传的是随手在博客截的我老婆的图~）