[Javascript] 透過 Ajax 上傳檔案

Web 上傳檔案的功能，使用 ASP.NET 的 FileUpload 可以在後端直接操作該物件處理檔案 ; 使用 MVC 的 HttpPostedFileBase，前端 Submit 後，後端也能輕鬆的接收並處理。

如果前端改成 jQuery AJAX，後端是一般 aspx 網頁沒有 HttpPostedFileBase 接收時，那該怎麼做呢? 或許這種傳統的方法已經很少人會去使用，很不幸的我就遇到了... 所以特別備忘下來。

前端：

<script type="text/javascript">
 function UploadFile() {
  // FormData 物件
  var formData = new FormData();
  // HTML File 
  var fileInput = document.getElementById("fileInput");

  // 如果File支援檔案多選，就用迴圈來找出所有檔案
  for (var i = 0; i < fileInput.files.length; i++) {
   formData.append(fileInput.files[i].name, fileInput.files[i]);
  }
  
  // 其他要POST的欄位，例如HTML Text
  formData.append('username', $("#txtUsername").val());

  $.ajax({
   url: 'Upload.aspx',
   type: 'POST',
   data: formData, // 將整個FormData POST到後端
   processData: false, // 禁止將data自動轉換成query string
   contentType: false, //取消預設值'application/x-www-form-urlencoded; charset=UTF-8'
   success: function (data) {
    alert(data);
   }
  });
 }
</script>

<input type="text" id="txtUsername" />
<input type="file" id="fileInput" multiple="multiple" />
<input type="button" onclick="UploadFile()" value="UploadFile" />

後端：

// 一般欄位的接收方法使用Request.Form
string Username = Request.Form["username"];

// 迴圈找出所有File，注意是用Request.Files，而不是Request.Form
for (int i = 0; i < Request.Files.Count; i++)
{
 HttpPostedFile file = Request.Files[i];
 
 int fileSize = file.ContentLength;
 string fileName = file.FileName;
 System.IO.Stream fileContent = file.InputStream;

 // 將檔案儲存起來
 try
 {
  file.SaveAs(Server.MapPath("~/UploadFiles/") + fileName);
 }
 catch (Exception ex)
 {
  Response.Write(ex.Message);
 }
}

參考來源：stackOverflow