使用模型綁定上傳小文件
HTML代碼：
1 <form method="post" enctype="multipart/form-data" asp-controller="Main" asp-action="UploadFiles"> 2 <div class="form-group"> 3 <div class="col-md-10"> 4 <p>使用此表單上傳一個或多個文件:</p> 5 <input type="file" name="files" multiple> 6 </div> 7 </div> 8 <div class="form-group"> 9 <div class="col-md-10"> 10 <input type="submit" value="上傳"> 11 </div> 12 </div> 13 </form> 14 @ViewBag.Message
為支持文件上傳，HTML 窗體必須指定 multipart/form-data 的 enctype
form表單的 enctype 屬性規定了form表單數據在發送到服務器時候的編碼方式
multipart/form-data：指定傳輸數據為二進制數據，例如圖片、mp3、文件
multiple屬性規定輸入字段可選擇多個值(支持批量上傳)
上傳到服務器的單個文件可使用 IFormFile 接口通過模型綁定進行訪問，該接口定義如下：
1 public interface IFormFile 2 { 3 string ContentType { get; } 4 string ContentDisposition { get; } 5 IHeaderDictionary Headers { get; } 6 long Length { get; } 7 string Name { get; } 8 string FileName { get; } 9 Stream OpenReadStream(); 10 void CopyTo(Stream target); 11 Task CopyToAsync(Stream target, CancellationToken cancellationToken = null); 12 }
注意：切勿依賴或信任未經驗證的 FileName 屬性。 FileName 屬性應僅用於顯示目的。
在控制器的構造函數中注入 IHostingEnvironment 來獲取網站根目錄路徑：
上傳方法：
1 public IActionResult UploadFiles(List<IFormFile> files) 2 { 3 long size = 0;//文件大小 4 foreach (var file in files) 5 { 6 var fileName = file.FileName.Trim('"');//獲取文件名 7 fileName = _hostingEnv.WebRootPath + $@"\{fileName}";//指定文件上傳的路徑 8 size += file.Length; 9 using (FileStream fs = System.IO.File.Create(fileName))//創建文件流 10 { 11 file.CopyTo(fs);//將上載文件的內容復制到目標流 12 fs.Flush();//清除此流的緩沖區並導致將任何緩沖數據寫入 13 } 14 } 15 ViewBag.Message = $"{files.Count}個文件 /{size}字節上傳成功!"; 16 return View("Index"); 17 }
使用 IFormFile 技術上傳的文件在處理之前會緩存在內存中或 Web 服務器的磁盤中。 在操作方法中，IFormFile 內容可作為流訪問。
運行結果：
在文件的根目錄下可以看到上傳的2文件：
上傳成功！
以上上傳功能使用表單提交，以下代碼擴展使用Ajax請求提交
HTML代碼：
1 <div class="row"> 2 <div class="form-group"> 3 <div class="col-md-10"> 4 <p>上傳一個或多個文件:</p> 5 <input type="file" id="files" name="files" multiple /> 6 </div> 7 </div> 8 </div> 9 <div class="row"> 10 <div class="form-group"> 11 <div class="col-md-10"> 12 <input type="button" id="upload" class="btn btn-success" style="cursor:pointer;" value="上傳" /> 13 </div> 14 </div> 15 </div>
JavaScript代碼：
1 $(function () { 2 $("#upload").click(function () { 3 var fileUpload = $("#files").get(0);//獲得第一個files的名稱和值 4 var files = fileUpload.files;//獲取文件信息 5 var data = new FormData();//通過FormData構造函數創建一個空對象 6 for (var i = 0; i < files.length; i++) { 7 data.append(files[i].name, files[i]);//通過append方法追加數據 8 } 9 $.ajax({ 10 type: "post", 11 url: "/Main/UploadFiles", 12 contentType: false,//不要去設置Content-Type請求頭 13 processData: false,//不要去處理發送的數據 14 data: data, 15 success: function (data) { 16 alert(data.message); 17 }, 18 error: function () { 19 alert("上傳文件出現錯誤！"); 20 } 21 }); 22 }); 23 })
上傳方法：
1 public IActionResult UploadFiles() 2 { 3 long size = 0;//文件大小 4 var files = Request.Form.Files;//獲取前端傳過來的文件 5 foreach (var file in files) 6 { 7 var fileName = file.FileName.Trim('"');//獲取文件名 8 fileName = _hostingEnv.WebRootPath + $@"\{fileName}";//指定文件上傳的路徑 9 size += file.Length; 10 using (FileStream fs = System.IO.File.Create(fileName))//創建文件流 11 { 12 file.CopyTo(fs);//將上載文件的內容復制到目標流 13 fs.Flush();//清除此流的緩沖區並導致將任何緩沖數據寫入 14 } 15 } 16 return Json(new { message = $"{files.Count}個文件 /{size}字節上傳成功!" }); 17 }
備注：如果文件上傳的大小或頻率會導致應用出現資源問題，請考慮使用流式處理上傳文件。
End！