表單上傳文件，asp.net mvc5

• 摘要

　　　　本文主要總結，mvc5中前端上傳文件的幾種方式。

 

• 后端代碼 

　　_hostingEnvironment為IHostingEnvironment 用於獲取當前程序物理路徑

　　_hostingEnvironment.WebRootPath 獲取路徑 “程序根目錄/wwwroot”

　　　　 [HttpPost]
        public ActionResult UploadFile(List<IFormFile> files)
        {
            string name = Guid.NewGuid().ToString("n");
            string filePath = _hostingEnvironment.WebRootPath+@"/Files/";

            foreach (var formFile in files)
            {
                string ext = System.IO.Path.GetExtension(formFile.FileName);
                System.IO.Directory.CreateDirectory(filePath);
                if (formFile.Length > 0)
                {
                    string path = filePath + name + ext;
                    using (var stream = new FileStream(path, FileMode.Create))
                    {
                        formFile.CopyToAsync(stream);
                    }
                }
            }

            return RedirectToAction("List");
        }

• 前端代碼 

1.  傳統表單上傳文件

<form method="post" enctype="multipart/form-data" action="@Url.Action("UploadFile")">
    <div class="form-group">
        <div class="col-md-10">
            <p>選擇文件</p>
            <input type="file" id="fileImg" name="files" multiple />
 </div>
 </div> 
<div class="form-group">
 <div class="col-md-10"> 
<input type="submit" value="上 傳" /> 
</div> 
</div>
 </form>

 

2.使用ajax上傳文件

<form enctype="multipart/form-data">
    <div class="form-group">
        <div class="col-md-10">
            <p>選擇文件</p>
            <input type="file" id="file" name="files" multiple />
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-10">
            <input type="button" onclick="ajaxupload()" value="ajax上傳" />
            <input type="button" onclick="formdataupload()" value="formdata對象上 傳" />
            <input type="button" onclick="uploadfile()" value="上 傳" />
        </div>
    </div>
</form>

<script>
    function ajaxupload() {
        var form = new FormData(document.querySelector("form"));
        $.ajax({
            url: "@Url.Action("UploadFile")",
            type: "POST",
            data: form,
            processData: false,  // 不處理數據
            contentType: false   // 不設置內容類型
        });
    }
</script>

 

3.FormData對象文件上傳

用form表單上傳

<script>
    function formdataupload() {

        var formdata = new FormData(document.querySelector("form"));
        var requst = new XMLHttpRequest();
        requst.open("post", "@Url.Action("UploadFile")");
        requst.send(formdata);
    }
</script>

　　不用form表單上傳

 

<script>
    function uploadFile() {
        var request = new XMLHttpRequest();
        var form = new FormData();
        form.append("Id", 23); // 數字23被立即轉換成字符串"23"
        var fileInputElement = $("#fileImg").get(0); // fileInputElement中已經包含了用戶所選擇的文件
           
        form.append("files", fileInputElement.files[0]); // 這里的files 要與后台List<IFormFile> files 保持一致

　　　　request.open("POST", "@Url.Action("UploadFile")"); request.send(form); 
} </script>

 

參考資料

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

https://blog.csdn.net/saharalili/article/details/79002568

 https://www.cnblogs.com/zhaopei/p/upload.html