AJAX(Asynchronous JavaScript and XML)是一種在網頁上實現異步通信的技術，可以在不刷新整個頁面的情況下，與后臺服務器進行數據交互。在Web開發中，文件上傳是一項常見的功能需求。傳統的文件上傳方式會導致整個頁面刷新，用戶體驗較差。而使用AJAX進行文件上傳可以提高用戶體驗，同時也減少了服務器的壓力。本文將介紹如何使用AJAX進行multipart文件上傳，并通過多個示例進行詳細說明。

在AJAX中，文件上傳主要是通過FormData對象進行處理。FormData是HTML5新增的一個對象，用于在發送表單數據時，將form元素內的數據按照鍵值對的形式進行組織。在文件上傳中，我們可以使用FormData來獲取文件元素的值，并通過AJAX請求將文件數據發送到服務器。

<form id="uploadForm"><input type="file" name="file" id="fileInput" /><br/><input type="submit" value="Upload" /></form><script>var uploadForm = document.getElementById("uploadForm");
var fileInput = document.getElementById("fileInput");
uploadForm.addEventListener("submit", function(event) {
event.preventDefault();
var formData = new FormData();
formData.append("file", fileInput.files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert("File uploaded successfully!");
}
}
xhr.send(formData);
});
</script>

在以上示例中，我們創建了一個表單`uploadForm`，其中包含一個文件輸入框`fileInput`和一個提交按鈕。當用戶選擇文件并點擊提交按鈕時，頁面不會發生刷新，而是通過監聽表單的submit事件來進行文件上傳操作。在事件處理函數中，我們首先調用`event.preventDefault()`方法來阻止默認的表單提交行為。然后，我們創建了FormData對象`formData`，并通過`formData.append()`方法將選擇的文件添加到FormData中。接著，我們創建了一個XMLHttpRequest對象`xhr`，并調用`xhr.open()`方法來設置請求的方法（POST）和URL（/upload）。最后，我們通過調用`xhr.send()`方法，將FormData對象發送到服務器。

上述示例只是一個簡單的文件上傳操作，實際應用中，可能需要對文件進行一些處理或者添加其他的表單數據。以下是一個更復雜的示例，展示了如何同時上傳多個文件，并附帶其他表單數據。

<form id="uploadForm"><input type="file" name="file1" /><br/><input type="file" name="file2" /><br/><input type="text" name="name" /><br/><input type="submit" value="Upload" /></form><script>var uploadForm = document.getElementById("uploadForm");
uploadForm.addEventListener("submit", function(event) {
event.preventDefault();
var formData = new FormData();
var file1Input = document.getElementsByName("file1")[0];
formData.append("file1", file1Input.files[0]);
var file2Input = document.getElementsByName("file2")[0];
formData.append("file2", file2Input.files[0]);
var nameInput = document.getElementsByName("name")[0];
formData.append("name", nameInput.value);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert("Files uploaded successfully!");
}
}
xhr.send(formData);
});
</script>

在這個示例中，我們添加了兩個文件輸入框和一個文本輸入框。在事件處理函數中，我們通過`document.getElementsByName()`方法獲取各個表單元素的值，并將它們添加到FormData對象中。服務器端可以根據表單數據和文件數據的鍵來進行解析和處理。

總結來說，AJAX的文件上傳通過FormData對象和XMLHttpRequest對象實現，可以在不刷新整個頁面的情況下進行文件上傳。通過上述兩個示例的演示，我們了解了如何使用AJAX進行multipart文件上傳，同時提供了多種情況下的實際應用。