AJAX 提交 file 數(shù)組可以實(shí)現(xiàn)在 Web 應(yīng)用程序中同時(shí)上傳多個(gè)文件的功能。通過(guò)使用 AJAX 技術(shù)，我們可以在不刷新整個(gè)頁(yè)面的情況下，將用戶選擇的多個(gè)文件發(fā)送到服務(wù)器端進(jìn)行處理。本文將介紹如何使用 AJAX 提交 file 數(shù)組，并通過(guò)舉例說(shuō)明其具體用法與實(shí)現(xiàn)原理。 首先，讓我們來(lái)看一個(gè)簡(jiǎn)單的例子。假設(shè)我們有一個(gè)文件上傳頁(yè)面，用戶可以通過(guò)點(diǎn)擊按鈕選擇多個(gè)文件進(jìn)行上傳。在 HTML 部分，我們可以使用 `` 標(biāo)簽來(lái)定義一個(gè)可以選擇多個(gè)文件的文件輸入框。通過(guò) `` 標(biāo)簽，用戶可以點(diǎn)擊提交按鈕，觸發(fā)文件上傳。 在 JavaScript 部分，我們可以使用原生的 XMLHttpRequest 對(duì)象來(lái)發(fā)送 AJAX 請(qǐng)求，并提交文件數(shù)據(jù)。首先，需要為文件輸入框添加一個(gè) `change` 事件監(jiān)聽(tīng)器，以便在選擇文件后觸發(fā)一些操作。當(dāng)用戶選擇了文件后，我們可以通過(guò)這個(gè)事件監(jiān)聽(tīng)器獲取用戶選擇的文件并存儲(chǔ)到一個(gè) File 對(duì)象數(shù)組中。 ```javascript document.querySelector('input[type="file"]').addEventListener('change', function(event) { var files = event.target.files; // 獲取用戶選擇的文件 // 處理文件數(shù)組，可以進(jìn)行一些預(yù)處理操作 }); ``` 在上述代碼中，`event.target.files` 屬性可以獲取用戶選擇的文件，并將其保存到一個(gè)文件數(shù)組中。接下來(lái)，我們可以使用 AJAX 發(fā)送文件數(shù)組到服務(wù)器端進(jìn)行處理。以下是一個(gè)使用 XMLHttpRequest 對(duì)象發(fā)送文件數(shù)組的例子： ```javascript var formData = new FormData(); // 創(chuàng)建一個(gè) FormData 對(duì)象 for (var i = 0; i< files.length; i++) { formData.append('files[]', files[i]); // 將每個(gè)文件添加到 FormData 對(duì)象中 } var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 上傳成功，進(jìn)行一些回調(diào)處理 } }; xhr.send(formData); // 發(fā)送 FormData 對(duì)象 ``` 在上述代碼中，我們首先創(chuàng)建了一個(gè) FormData 對(duì)象，并使用 `append()` 方法將每個(gè)文件添加到 FormData 對(duì)象中。通過(guò)設(shè)置 `xhr.onreadystatechange` 屬性，我們可以監(jiān)聽(tīng) AJAX 請(qǐng)求的狀態(tài)改變。當(dāng)請(qǐng)求狀態(tài)為 4（請(qǐng)求完成）且狀態(tài)碼為 200（請(qǐng)求成功）時(shí)，可以進(jìn)行一些上傳成功后的回調(diào)處理。 最后，在服務(wù)器端，我們可以使用相應(yīng)的后端語(yǔ)言（如 PHP、Node.js 等）來(lái)接收提交的文件數(shù)組，并進(jìn)行處理。在這里，我們以 PHP 為例，演示如何接收和處理文件數(shù)組。 ```php $files = $_FILES['files']; // 獲取上傳的文件數(shù)組 $uploadDir = '/path/to/upload/directory/'; for ($i = 0; $i< count($files['name']); $i++) { $uploadFile = $uploadDir . basename($files['name'][$i]); move_uploaded_file($files['tmp_name'][$i], $uploadFile); } ``` 在上述代碼中，`$_FILES` 變量用于接收提交的文件數(shù)組。通過(guò) `$_FILES['files']` 可以獲取文件數(shù)組的名稱、臨時(shí)文件路徑等信息。使用 `move_uploaded_file()` 函數(shù)，可以將上傳的文件移動(dòng)到指定的上傳目錄。通過(guò)遍歷文件數(shù)組，我們可以逐個(gè)處理用戶上傳的所有文件。 綜上所述，通過(guò) AJAX 提交 file 數(shù)組，我們可以實(shí)現(xiàn)在 Web 應(yīng)用程序中同時(shí)上傳多個(gè)文件的功能。通過(guò)使用原生的 XMLHttpRequest 對(duì)象，我們可以方便地將文件數(shù)據(jù)發(fā)送到服務(wù)器端進(jìn)行處理。無(wú)論是前端獲取用戶選擇的文件，還是后端接收和處理文件數(shù)組，都需要使用相應(yīng)的方法和技術(shù)來(lái)實(shí)現(xiàn)。通過(guò)本文介紹的例子和原理，相信讀者能夠更好地掌握 AJAX 提交 file 數(shù)組的用法與實(shí)現(xiàn)。