AJAX是一種在網頁上實現異步通信的技術。在文件上傳方面，AJAX可以實現一對多文件流的傳輸，為網頁開發帶來了更多的可能性。本文將介紹如何使用AJAX上傳一對多文件流，并通過舉例說明其應用場景和效果。

在很多網頁應用中，用戶需要上傳多個文件。傳統的方法是通過表單提交實現文件上傳，但這種方式會導致頁面刷新，并有可能導致上傳過程中的數據丟失。而使用AJAX上傳一對多文件流，可以在不刷新頁面的情況下實現文件的上傳，提升用戶體驗。

舉個例子，假設我們正在開發一個圖片分享應用。用戶可以在頁面上選擇多張圖片進行上傳。下面是使用AJAX上傳一對多文件流的示例代碼：

// HTML代碼
<input type="file" id="fileInput" multiple>
<button id="uploadButton">上傳</button>
<div id="progressBar">0%</div>
// JavaScript代碼
var fileInput = document.getElementById('fileInput');
var uploadButton = document.getElementById('uploadButton');
var progressBar = document.getElementById('progressBar');
uploadButton.addEventListener('click', function() {
var files = fileInput.files;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function() {
progressBar.innerHTML = '上傳完成';
};
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var progress = (event.loaded / event.total) * 100;
progressBar.innerHTML = progress + '%';
}
};
var formData = new FormData();
for (var i = 0; i< files.length; i++) {
formData.append('files', files[i]);
}
xhr.send(formData);
});

在上面的示例中，我們首先獲取到文件選擇框和上傳按鈕的DOM元素。然后添加一個點擊事件監聽器，當用戶點擊上傳按鈕時觸發。當觸發事件后，我們獲取到用戶選擇的文件列表，并通過XMLHttpRequest對象發送POST請求到服務器的/upload路由。在發送請求之前，我們為XHR對象的onload事件和upload.onprogress事件添加了事件處理器，以便在上傳過程中顯示上傳進度。

這種方式可以在不刷新頁面的情況下實現文件的上傳，大大提升了用戶體驗。用戶可以一次性選擇多張圖片，然后點擊上傳按鈕即可將這些圖片一并上傳到服務器。上傳過程中，頁面不會發生刷新，用戶可以實時看到上傳進度，并得到上傳完成的反饋。

總之，使用AJAX上傳一對多文件流是一種方便、高效的方式，可以在網頁上實現多文件的異步上傳。無論是圖片分享應用、文件共享系統還是其他需要上傳多個文件的場景，都可以使用AJAX來實現。這種方式不僅提升了用戶體驗，還能夠提高網頁的性能和效率。