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

 

成功后的效果：（上傳的是隨手在博客截的我老婆的圖~）