AJAX（Asynchronous JavaScript and XML）是一種用于在不重新加載整個頁面的情況下向服務器發送請求并獲取數據的技術。在網頁開發中，常常會遇到需要上傳文件的情況。本文將介紹如何使用AJAX通過FormData對象上傳文件，并給出具體的示例。

在前端開發中，我們經常需要實現用戶上傳文件的功能。以圖片上傳為例，用戶在頁面中選擇一張圖片后，就需要將這張圖片發送給服務器進行處理。使用傳統的表單提交方式，頁面會重新加載，用戶體驗不好。AJAX上傳文件的方式可以在文件上傳的過程中實現無刷新頁面，提升用戶體驗。

var formData = new FormData();  // 創建一個FormData對象
var fileInput = document.getElementById('fileInput');
formData.append('file', fileInput.files[0]);  // 將選擇的文件添加到FormData對象中
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);  // 創建一個AJAX請求
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {  // 請求完成并且成功
console.log(xhr.responseText);  // 服務器返回的響應內容
}
};
xhr.send(formData);  // 發送請求，傳遞FormData對象

首先，我們創建了一個FormData對象，并獲取了用戶選擇的文件。在這個例子中，我們使用了一個file input元素，其id為fileInput。通過document.getElementById獲取到這個元素，并通過其files屬性獲取到用戶選擇的文件對象數組。我們將第一個文件添加到FormData對象中，以key-value的形式，其中key為'file'，value為用戶選擇的文件。

然后，我們創建了一個XMLHttpRequest對象，用于發送AJAX請求。xhr.open函數用于配置請求，其中第一個參數為請求方法，這里我們使用POST；第二個參數為請求的URL；第三個參數表示是否異步處理，默認為true。xhr.onreadystatechange函數用于監聽請求狀態的變化，當請求狀態為4且HTTP狀態碼為200時表示請求成功，我們可以通過xhr.responseText屬性獲取到服務器返回的響應內容。

最后，我們調用xhr.send方法發送請求，將FormData對象作為請求的參數。此時，瀏覽器會自動將FormData對象中的數據轉為multipart/form-data格式，并發送給服務器。由于我們使用了XMLHttpRequest對象，所以頁面不會重新加載，用戶可以在文件上傳的過程中繼續進行其他操作。

除了上傳文件，FormData對象還可以攜帶其他字段的數據。例如，我們可以同時上傳用戶填寫的表單數據和文件。下面是一個示例：

var formData = new FormData();
formData.append('name', 'John');
formData.append('email', 'john@example.com');
var fileInput = document.getElementById('fileInput');
formData.append('file', fileInput.files[0]);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(formData);

以上代碼中，我們除了添加了文件字段外，還添加了兩個普通字段，分別為'name'和'email'。在FormData對象中，我們可以通過調用append方法添加任意多個鍵值對。在服務器端接收時，可以像處理普通表單數據一樣獲取到這些字段的值。

總結來說，使用AJAX上傳文件可以實現無刷新頁面的效果，提升用戶體驗。通過FormData對象，我們可以方便地將選擇的文件和其他字段的數據組合成一個請求體，并發送給服務器。在處理上傳文件的功能時，這種方式是非常有用的。