AJAX 提交 multipart/form-data 表單（含文件上傳）的正確姿勢

核心結論

不能直接用 $('#form').serialize() 提交 multipart/form-data 表單。serialize() 僅能序列化 application/x-www-form-urlencoded 格式數據，無法處理文件輸入框。

正確做法：使用 FormData 對象

var formData = new FormData($('#regForm')[0]); // 原生 DOM 元素

$.ajax({
  url: '/upload',
  type: 'POST',
  data: formData,
  processData: false,  // 告訴 jQuery 不要處理數據
  contentType: false,  // 告訴 jQuery 不要設置 Content-Type，瀏覽器會自動帶上 boundary
  success: function(res) {
    console.log('上傳成功', res);
  }
});

關鍵點解析

• new FormData(formElement)：自動收集表單所有字段，包括 <input type="file">。
• processData: false：防止 jQuery 將 FormData 轉為字符串。
• contentType: false：必須由瀏覽器自動生成 multipart/form-data; boundary=xxx。

原生 fetch 寫法（現代項目推薦）

const form = document.getElementById('regForm');
fetch('/upload', {
  method: 'POST',
  body: new FormData(form)
}).then(r => r.json()).then(console.log);

常見坑

• 設置了 contentType: 'multipart/form-data' → 缺少 boundary，服務端解析失敗。
• 忘記 processData: false → 發送 [object FormData] 字符串。
• 表單未設置 enctype="multipart/form-data" → 雖然 AJAX 用 FormData 可忽略，但降級提交時必需。