[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框架，复制就可以用惹~~

 

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