AJAX多個input file上傳，是一種方便快捷的方式，可以同時上傳多個文件，提高用戶體驗。通過使用AJAX技術(shù)，我們可以實現(xiàn)異步上傳文件，無需刷新整個頁面。本文將介紹如何使用AJAX實現(xiàn)多個input file上傳，并提供一些示例代碼。希望通過本文的介紹，您能夠更好地理解和應(yīng)用AJAX多個input file上傳。

在實際開發(fā)中，我們經(jīng)常會遇到需要上傳多個文件的情況，比如用戶批量選擇照片上傳、批量上傳附件等。如果使用傳統(tǒng)的表單提交方式，每次只能上傳一個文件，用戶體驗較差。而使用AJAX多個input file上傳，可以讓用戶同時選擇多個文件，一次性上傳，既提高了效率，也減少了用戶的操作次數(shù)。

下面是一個使用AJAX實現(xiàn)多個input file上傳的示例：

// HTML部分
<input type="file" id="file1" multiple>
<input type="file" id="file2" multiple>
<input type="button" value="上傳" onclick="uploadFiles()">
<div id="result"></div>
// JS部分
function uploadFiles() {
var file1 = document.getElementById('file1').files;
var file2 = document.getElementById('file2').files;
var formData = new FormData();
formData.append('file1', file1[0]);
formData.append('file2', file2[0]);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('result').innerHTML = xhr.responseText;
}
};
xhr.send(formData);
}

在上面的示例中，我們通過<input type="file" multiple>來設(shè)置允許選擇多個文件。通過JavaScript的File API，可以獲取到選擇的文件，并通過FormData對象將文件添加到表單數(shù)據(jù)中。然后，使用XMLHttpRequest對象發(fā)送異步請求，將表單數(shù)據(jù)發(fā)送到服務(wù)器端進行處理。

在服務(wù)器端，我們可以使用PHP等后端語言來處理上傳的文件。下面是一個簡單的PHP示例：

// PHP部分（upload.php）
$file1 = $_FILES['file1'];
$file2 = $_FILES['file2'];
$targetDir = 'uploads/';
move_uploaded_file($file1['tmp_name'], $targetDir . $file1['name']);
move_uploaded_file($file2['tmp_name'], $targetDir . $file2['name']);
echo '文件上傳成功！';

如上所示，我們通過$_FILES數(shù)組獲取到上傳的文件，然后將文件移動到指定文件夾中。最后，返回一個成功信息給前端。

總結(jié)：

AJAX多個input file上傳是一個非常實用的技術(shù)，可以提高用戶體驗，減少用戶操作次數(shù)。通過使用AJAX技術(shù)，我們可以實現(xiàn)異步上傳多個文件，無需刷新整個頁面。在實際開發(fā)中，我們可以根據(jù)需求選擇合適的前端框架或工具來輔助實現(xiàn)多個input file上傳。希望通過本文的介紹，您對AJAX多個input file上傳有了更深入的理解。