AJAX FormData多文件上傳是一種常見的技術，它允許我們在不刷新整個頁面的情況下，異步地上傳多個文件。這種方式非常靈活，可以用于各種場景，比如上傳圖片、音頻、視頻等。通過使用FormData對象，我們可以同時將多個文件一起發送到服務器，并在上傳過程中獲取上傳進度等信息。本文將介紹如何使用AJAX FormData多文件上傳，并通過實例來更好地理解其中的細節。

什么是AJAX FormData多文件上傳

在傳統的文件上傳方式中，我們需要使用表單或者其他方式將文件發送到服務器。由于HTTP協議的限制，每次只能上傳一個文件。而使用AJAX FormData多文件上傳則可以解決這個問題，它允許我們一次性上傳多個文件，而無需刷新整個頁面。這種方式在用戶體驗和頁面性能上都有很大的提升。

如何使用AJAX FormData多文件上傳

首先，我們需要創建一個表單，其中包含一個文件輸入域和一個上傳按鈕。用戶可以通過文件輸入域選擇多個文件，并點擊上傳按鈕來觸發上傳操作。在觸發上傳操作時，我們需要使用JavaScript來獲取用戶選擇的文件，并將其加入FormData對象中。

<form id="upload-form" enctype="multipart/form-data">
<input type="file" name="files[]" multiple />
<button type="button" onclick="uploadFiles()">上傳文件</button>
</form>

在上述示例中，我們使用input元素的multiple屬性來允許用戶選擇多個文件。點擊上傳按鈕時，我們調用了一個名為uploadFiles的函數來觸發上傳操作。下面是uploadFiles函數的示例代碼。

function uploadFiles() {
var form = document.getElementById("upload-form");
var formData = new FormData(form);
// 發送AJAX請求，上傳文件
// ...
}

上傳文件到服務器

將文件添加到FormData對象之后，我們可以使用AJAX來將其發送到服務器。我們可以使用XMLHttpRequest對象來執行AJAX請求，也可以使用jQuery等工具庫來簡化代碼。下面是使用原生JavaScript進行AJAX上傳的示例代碼。

function uploadFiles() {
var form = document.getElementById("upload-form");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
// 上傳進度變化時的回調函數
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
console.log(percentComplete + "% 已上傳");
}
};
// 上傳完成后的回調函數
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log("文件上傳成功");
}
};
// 發送AJAX請求，上傳文件
xhr.open("POST", "/upload", true);
xhr.send(formData);
}

在上述示例中，我們創建了一個XMLHttpRequest對象，并通過xhr.upload.onprogress屬性來監聽上傳進度的變化。xhr.onreadystatechange屬性則用于在上傳完成后執行一些操作，比如顯示上傳成功的提示信息。最后，我們調用xhr.open方法來設置HTTP方法和URL，并使用xhr.send方法將FormData對象發送到服務器。

總結

AJAX FormData多文件上傳允許我們在不刷新整個頁面的情況下，異步地上傳多個文件。通過使用FormData對象，我們可以一次性上傳多個文件，并在上傳過程中獲取上傳進度等信息。這種方式極大地提升了用戶體驗和頁面性能。在實際應用中，我們可以通過將多個文件一起上傳，減少了用戶的等待時間，提高了系統的效率。