AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式網頁應用程序的技術。它通過在后臺發送和接收數據，實現不刷新整個頁面的前端交互。在許多情況下，我們需要通過 AJAX 提交包含文件上傳的表單。然而，由于 AJAX 默認不支持 multipart/form-data 格式的數據提交，這就增加了一些挑戰。本文將介紹如何使用 AJAX 提交帶有 multipart/form-data 格式的表單，并給出一些實際示例。

首先，讓我們來了解一下 multipart/form-data 格式。它是一種常用于提交包含文件上傳的表單的 MIME 類型。當我們選擇了一個文件后，表單數據和文件數據會一同被編碼并作為一個整體發送給服務器。而不像默認的表單提交方式，以鍵值對的形式將數據發送給服務器。這就是為什么在 AJAX 中提交 multipart/form-data 格式的表單更加復雜。

要使用 AJAX 提交包含文件上傳的表單，我們可以借助 FormData 對象。FormData 是一個用于將表單數據封裝成鍵值對的 JavaScript 對象。它可以自動適配 multipart/form-data 格式，并提供了一些方法來添加和獲取表單數據。下面是一個使用 AJAX 提交 multipart/form-data 格式的表單的示例：

var formElement = document.getElementById("myForm");
var formData = new FormData(formElement);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理服務器返回的響應數據
}
};
xhr.send(formData);

在上述示例中，我們首先通過 id 獲取了表單元素（假設表單的 id 是 "myForm"），然后使用 FormData 構造函數創建了一個 FormData 對象并將表單元素傳入。接著，我們使用 XMLHttpRequest 對象創建了一個 AJAX 請求，并設置了請求的類型、URL 和異步標志。然后，我們監聽了 XMLHttpRequest 對象的 readyState 變化和返回狀態，并在 readyState 為 4、返回狀態為 200 時執行相應的操作。

值得注意的是，由于文件的上傳通常是一個耗時的操作，所以在 AJAX 請求發送過程中，頁面上的其他內容可以繼續加載和交互，使得用戶體驗更好。另外，我們還可以使用 onprogress 事件來跟蹤文件上傳的進度，以便給用戶提供更直觀的反饋。

如果要上傳多個文件，我們可以使用 append 方法添加多個文件字段。下面是一個添加了多個文件字段的示例：

var formElement = document.getElementById("myForm");
var formData = new FormData(formElement);
formData.append("file1", file1);
formData.append("file2", file2);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理服務器返回的響應數據
}
};
xhr.send(formData);

在上述示例中，我們使用了 append 方法將兩個文件字段添加到 FormData 對象中。其中，file1 和 file2 分別表示兩個文件的引用。

總結來說，通過使用 FormData 對象，我們可以在 AJAX 中提交帶有 multipart/form-data 格式的表單，實現文件上傳的功能。無論是單個文件還是多個文件，都可以通過 append 方法將文件字段添加到 FormData 對象中。這樣，我們既能夠實現文件上傳，又能夠保持頁面的良好用戶體驗。