JavaScript FormData 正確上傳圖片與表單資料的完整實作

常見錯誤分析

原代碼嘗試將 FormData 物件序列化為 JSON，導致圖片二進位資料遺失：

var jsonData = {"name": name, "img": formdata, ...};
jsonData = JSON.stringify(jsonData); // FormData 變成空物件 {}
$.post("url", jsonData, ...);

正確做法：直接送出 FormData

核心原則

• 不要 手動 JSON.stringify FormData
• 必須 設定 processData: false、contentType: false
• 所有欄位 統一用 formdata.append() 加入

完整實作範例

<form id="uploadForm" enctype="multipart/form-data">
    <input type="text" id="name" placeholder="寶貝暱稱" />
    <select id="year"><option value="2014">2014</option></select>
    <select id="month"><option value="4">4</option></select>
    <input type="text" id="mobile" placeholder="手機" />
    <input type="text" id="qq" placeholder="QQ" />
    <textarea name="desc" placeholder="描述"></textarea>
    <input type="file" id="input-file-now" multiple />
    <button type="submit">提交</button>
</form>

<script>
$('#uploadForm').on('submit', function(e) {
    e.preventDefault();
    
    var formdata = new FormData(this); // 自動收集表單所有欄位
    
    // 如果需要額外處理檔案
    var files = $('#input-file-now')[0].files;
    for (var i = 0; i < files.length; i++) {
        formdata.append('fileList', files[i]); // 附加二進位檔案
    }
    
    $.ajax({
        url: '/api/upload',
        type: 'POST',
        data: formdata,
        processData: false,  // 關鍵：不處理資料
        contentType: false,  // 關鍵：不設定 Content-Type，讓瀏覽器自動加 boundary
        success: function(res) {
            console.log('上傳成功', res);
        },
        error: function(xhr) {
            console.error('上傳失敗', xhr.responseText);
        }
    });
});
</script>

後端接收要點（以 ASP.NET Core 為例）

[HttpPost]
public async Task<IActionResult> Upload(
    string name, 
    string birthday, 
    string mobile, 
    string qq, 
    string desc,
    List<IFormFile> fileList) 
{
    foreach (var file in fileList) {
        if (file.Length > 0) {
            var path = Path.Combine(_env.WebRootPath, "uploads", file.FileName);
            using (var stream = new FileStream(path, FileMode.Create)) {
                await file.CopyToAsync(stream);
            }
        }
    }
    return Ok(new { message = "上傳成功" });
}

進階：上傳進度顯示

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                var percent = Math.round((e.loaded / e.total) * 100);
                $('#progressBar').css('width', percent + '%').text(percent + '%');
            }
        });
        return xhr;
    },
    // ... 其他設定
});

常見坑點速查表