HTML input type=file 以 AJAX 上傳檔案至後端

使用者需求

使用者在網頁選取檔案（如圖片）後，點擊確定按鈕，希望透過 AJAX 非同步將檔案傳送至後端，並轉為 byte 陣列處理，類似論壇發文上傳圖片的功能。

傳統限制

早期瀏覽器安全機制下，JavaScript 無法直接取得本機檔案完整路徑，只能取得檔名。若使用傳統 <form> 提交，頁面會重新整理，體驗不佳。

現代解決方案：FormData + XMLHttpRequest / Fetch API

HTML5 引入 FormData 介面，可輕鬆構建鍵值對資料，包含檔案二進位內容，配合 XMLHttpRequest 或 fetch 即可非同步上傳。

前端實作範例

<input type="file" id="fileInput" accept="image/*" />
<button id="uploadBtn">上傳</button>

<script>
document.getElementById('uploadBtn').addEventListener('click', async () => {
  const file = document.getElementById('fileInput').files[0];
  if (!file) return alert('請先選擇檔案');

  const formData = new FormData();
  formData.append('file', file); // key 需與後端對應

  try {
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
      // 不需設定 Content-Type，瀏覽器會自動帶入 multipart/form-data 及 boundary
    });
    const result = await response.json();
    console.log('上傳成功', result);
  } catch (err) {
    console.error('上傳失敗', err);
  }
});
</script>

後端接收

• ASP.NET Core：IFormFile file = Request.Form.Files["file"]; 讀取 file.OpenReadStream() 取得串流，或 file.CopyToAsync(memoryStream) 轉 byte[]。
• Java Spring：@RequestParam("file") MultipartFile file 取得 file.getBytes()。
• Node.js (Express + multer)：req.file.buffer 直接為 Buffer。

進階補充

• 上傳進度條：使用 XMLHttpRequest.upload.onprogress 監聽進度事件。
• 多檔案上傳：input multiple 並迴圈 formData.append('files', file)。
• 大檔案分片上傳：前端切片，後端合併，需自行設計協定。
• 安全性：後端務必驗證檔案類型、大小、掃毒，避免惡意上傳。

採用 FormData + fetch 是現代 Web 應用上傳檔案的標準做法，體驗流暢且相容性佳（IE10+ 皆支援）。