[Asp.net mvc]jquery.form.js無刷新上傳

寫在前面

最近在本身的網盤項目中想用ajax.beginform的方式作無刷新的操做，提交表單什麼的均可以，但針對文件上傳，就是個雞肋。在網上查找了發現不少人都遇到了這個問題，大部分都推薦使用jquery.form.js的插件實現。

demo

首先經過nuget安裝插件jquery.form.js

引入js文件

  <script src="~/Scripts/jquery.form.min.js"></script>

前端調用的代碼

@{
    ViewBag.Title = "Upload";
}

<form enctype="multipart/form-data" method="post" id="upload">
    <input type="file" id="fileupload" name="Upload" />
    @* button 而不是 submit *@
    <input type="button" value="上傳" id="btn">
</form>
<script>
    $("#btn").click(function () {
        $("#upload").ajaxSubmit({
            url: "../test/UploadFile",
            type: "post",
            success: function (data) {
                console.log(data);
            },
            error: function (aa) {
                console.log(aa);
            }
        });
    });
</script>

能夠對其設置刷新的區域

target: "#myheader",//刷新的區域
clearForm: true, // clear all form fields after successful submit
resetForm: true, // reset the form after successful submit

服務端代碼

    public class TestController : Controller
    {
        // GET: Test
        public ActionResult Upload()
        {
            return View();
        }
        [HttpPost]
        public JsonResult UploadFile()
        {
            HttpPostedFileBase file = Request.Files[0];
            if (file != null)
            {
                string fileName = Path.GetFileName(file.FileName);
                string fileExt = Path.GetExtension(file.FileName);
                string fileNewName = Guid.NewGuid() + fileExt;
                string fileSaveDir = Server.MapPath("~/upload");
                if (!Directory.Exists(fileSaveDir))
                {
                    Directory.CreateDirectory(fileSaveDir);
                }
                file.SaveAs(Path.Combine(fileSaveDir, fileName));
                return new JsonResult
                {
                    Data = new
                    {
                        _code = 200,
                        _msg = "上傳成功",
                        _data = new
                        {
                            _url = "/upload/" + fileNewName,
                            _oldName = fileName
                        }
                    }
                    ,
                    JsonRequestBehavior = JsonRequestBehavior.DenyGet
                };
            }
            return new JsonResult { Data = new { _code = 200, _msg = "上傳失敗" }, JsonRequestBehavior = JsonRequestBehavior.DenyGet };
        }
    }

測試

jquery.form上傳文件內部是怎麼實現無刷新的呢？

調試下js你會發現，內部是經過iframe實現的無刷新上傳，以下圖所示：

總結

最近在網盤項目中用到了上傳，原本打算使用ajax.beginform實現，發現並實現不了。只能用jquery.form插件代替了。