本文將介紹如何使用Ajax實(shí)現(xiàn)同時(shí)上傳多個(gè)文件的功能。通常情況下，我們使用表單來(lái)上傳文件，但是每次只能上傳一個(gè)文件。通過(guò)使用Ajax可以實(shí)現(xiàn)同時(shí)上傳多個(gè)文件，提高用戶(hù)體驗(yàn)。

想象一種情況，你正在開(kāi)發(fā)一個(gè)圖片分享網(wǎng)站，用戶(hù)可以上傳多張圖片。如果使用傳統(tǒng)的表單提交方式，用戶(hù)每次只能上傳一張圖片，然后等待上傳完成才能再上傳下一張。這無(wú)疑會(huì)給用戶(hù)帶來(lái)不便。但是，如果使用Ajax，用戶(hù)可以一次性選擇多張圖片，然后同時(shí)上傳，大大提高了上傳效率。

在HTML文件中，我們需要?jiǎng)?chuàng)建一個(gè)文件上傳表單，用戶(hù)可以通過(guò)該表單選擇要上傳的文件。以下是一個(gè)簡(jiǎn)單的HTML示例：

<form id="uploadForm" action="upload.php" method="POST" enctype="multipart/form-data"><input type="file" name="file[]" multiple><input type="submit" value="上傳"></form>

在上面的示例中，我們通過(guò)給input元素添加multiple屬性，使得用戶(hù)可以選擇多個(gè)文件。而且需要將表單的enctype屬性設(shè)置為"multipart/form-data"，這樣才能支持文件上傳。

接下來(lái)，我們需要編寫(xiě)相應(yīng)的JavaScript代碼來(lái)處理文件上傳事件。首先，我們通過(guò)使用FormData對(duì)象來(lái)創(chuàng)建一個(gè)表單數(shù)據(jù)實(shí)例，并將用戶(hù)選擇的文件添加到該實(shí)例中。以下是一個(gè)示例：

var form = document.getElementById("uploadForm");
var formData = new FormData(form);
// 添加額外的參數(shù)
formData.append("user_id", user_id);
formData.append("album_id", album_id);

在上面的示例中，我們使用FormData的append方法將額外的參數(shù)（如用戶(hù)ID和相冊(cè)ID）添加到表單數(shù)據(jù)中。這些參數(shù)在上傳文件時(shí)可以一同發(fā)送到服務(wù)器端。

接下來(lái)，我們需要發(fā)送Ajax請(qǐng)求，并將表單數(shù)據(jù)作為請(qǐng)求的數(shù)據(jù)發(fā)送到服務(wù)器端。以下是一個(gè)示例：

var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 上傳成功
}
};
xhr.send(formData);

在上述示例中，我們使用XMLHttpRequest對(duì)象創(chuàng)建了一個(gè)異步請(qǐng)求。然后，我們通過(guò)調(diào)用open方法指定請(qǐng)求的方法、URL和是否異步。在onreadystatechange事件中，我們可以根據(jù)服務(wù)器返回的狀態(tài)進(jìn)行處理。當(dāng)狀態(tài)為4（請(qǐng)求已完成）且狀態(tài)碼為200（成功）時(shí)，表示上傳成功。

在服務(wù)器端，我們需要編寫(xiě)相應(yīng)的PHP代碼來(lái)處理文件上傳。以下是一個(gè)簡(jiǎn)單的示例：

$fileArray = $_FILES["file"];
foreach ($fileArray["name"] as $key =>$name) {
$tmpName = $fileArray["tmp_name"][$key];
$size = $fileArray["size"][$key];
$error = $fileArray["error"][$key];
// 執(zhí)行上傳邏輯
}

在上面的示例中，我們通過(guò)使用$_FILES變量來(lái)獲取上傳文件的相關(guān)信息。通過(guò)遍歷文件名數(shù)組，我們可以依次獲取每個(gè)文件的臨時(shí)文件名、文件大小和錯(cuò)誤碼。然后，我們可以執(zhí)行上傳文件的邏輯，例如將文件保存到服務(wù)器的指定目錄。

通過(guò)以上步驟，我們可以實(shí)現(xiàn)同時(shí)上傳多個(gè)文件的功能。用戶(hù)可以一次性選擇多個(gè)文件，并通過(guò)Ajax將文件同時(shí)上傳到服務(wù)器端。這樣，大大提高了文件上傳的效率，提升了用戶(hù)體驗(yàn)。