AJAX（Asynchronous JavaScript and XML）是一種用于在網(wǎng)頁上進(jìn)行異步傳輸和更新數(shù)據(jù)的技術(shù)，它能夠在不重新加載整個網(wǎng)頁的情況下，與服務(wù)器進(jìn)行通信并更新部分頁面內(nèi)容。在文件上傳的場景中，AJAX技術(shù)的靈活性和實用性非常突出，能夠?qū)崿F(xiàn)異步提交多個文件并實時顯示上傳進(jìn)度。本文將介紹如何使用AJAX來實現(xiàn)這一功能，并通過多個實例來加深理解。

在使用AJAX異步提交多個文件之前，首先需要明確上傳文件的輸入方式。一種常見的方式是通過標(biāo)簽來選擇文件。在HTML中，可以使用如下代碼來創(chuàng)建一個文件上傳的輸入框：

<input type="file" name="file" id="file">

當(dāng)用戶選擇文件后，通過JavaScript的事件監(jiān)聽機(jī)制，可以獲取到用戶選擇的文件。如下所示：

document.getElementById("file").addEventListener("change", function(event) {
var inputFile = event.target.files[0];
// 進(jìn)一步處理文件
});

在文件被選擇后，可以根據(jù)業(yè)務(wù)需求對文件進(jìn)行進(jìn)一步處理，例如顯示文件名、文件大小等信息。

接下來，在提交文件之前，需要將選擇的文件通過AJAX發(fā)送到服務(wù)器。AJAX通過XMLHttpRequest對象來實現(xiàn)與服務(wù)器的通信。以下是一個簡單的發(fā)送文件的AJAX請求的示例：

var file = event.target.files[0];
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.send(file);

上述代碼中，首先創(chuàng)建了一個XMLHttpRequest對象，然后使用open方法指定請求的方法、URL和是否使用異步方式。'POST'表示使用HTTP POST方法提交文件，'/upload'是服務(wù)器端接收文件的URL。在請求頭中，通過setRequestHeader方法設(shè)置了X-Requested-With為XMLHttpRequest，以便服務(wù)器能夠識別這是一個AJAX請求。最后，使用send方法發(fā)送文件到服務(wù)器。

在發(fā)送文件的過程中，服務(wù)器端可以通過遍歷請求中的文件數(shù)據(jù)，對每個文件進(jìn)行處理和保存。以下是一個使用Node.js的Express框架來接收文件并保存的示例：

var express = require('express');
var multer  = require('multer');
var upload = multer({ dest: 'uploads/' });
var app = express();
app.post('/upload', upload.single('file'), function (req, res) {
res.send('文件上傳成功');
});
app.listen(3000, function () {
console.log('服務(wù)器已啟動，監(jiān)聽端口3000');
});

上述代碼中，使用multer中間件來處理文件上傳，將上傳的文件保存在'uploads/'目錄中。通過調(diào)用upload.single方法，表明只允許上傳一個文件，并指定文件字段的名稱為'file'。當(dāng)文件上傳成功后，服務(wù)器返回一個響應(yīng)，表示文件上傳成功。

除了能夠?qū)崿F(xiàn)文件上傳，AJAX還可以實現(xiàn)文件上傳的進(jìn)度顯示。通過監(jiān)聽XMLHttpRequest的upload對象上的progress事件，可以獲取到文件上傳的進(jìn)度信息。以下是一個實現(xiàn)顯示文件上傳進(jìn)度的示例：

xhr.upload.addEventListener("progress", function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
// 顯示上傳進(jìn)度
}
});

在上述代碼中，通過計算已上傳字節(jié)和總字節(jié)數(shù)的比例，得到上傳的百分比，然后可以根據(jù)需要將百分比顯示出來，以直觀地展示文件上傳的進(jìn)度。

綜上所述，使用AJAX異步提交多個文件可以通過HTML的標(biāo)簽選擇文件，然后通過JavaScript獲取并發(fā)送到服務(wù)器。在服務(wù)器端，可以使用相應(yīng)的后端框架來接收和保存文件。同時，通過監(jiān)聽XMLHttpRequest的upload對象上的progress事件，可以實現(xiàn)文件上傳的進(jìn)度顯示。AJAX異步提交文件的功能在實際項目中應(yīng)用廣泛，能夠提升用戶體驗并提高系統(tǒng)的性能。