AJAX是一種無需頁面刷新而實現與服務器交互的技術，廣泛應用于Web開發中。在文件上傳過程中，我們經常需要顯示上傳進度條，以提供用戶友好的體驗。本文將介紹實現上傳進度條的原理，并通過舉例進行說明。

在傳統的文件上傳過程中，當用戶提交文件至服務器時，頁面會發生刷新。而使用AJAX技術，可以實現在文件上傳過程中不刷新頁面，同時提供實時的上傳進度反饋。

實現文件上傳進度條的關鍵是將文件數據進行分塊上傳，并通過AJAX請求將每個分塊數據上傳至服務器。在每個分塊上傳的過程中，服務器會返回上傳進度的信息。通過這些信息，我們可以實時更新上傳進度條。

以下是一個示例代碼，用于實現文件上傳進度條：

var file = document.getElementById('fileInput').files[0];
var chunkSize = 1024 * 1024; // 每個分塊的大小為1MB
var totalChunks = Math.ceil(file.size / chunkSize); // 文件總共需要上傳的分塊數量
var currentChunk = 0; // 當前正在上傳的分塊序號
function uploadChunk() {
var start = currentChunk * chunkSize;
var end = Math.min(start + chunkSize, file.size);
var chunk = file.slice(start, end); // 獲取當前分塊的數據
var formData = new FormData();
formData.append('chunk', chunk);
formData.append('chunkNumber', currentChunk);
formData.append('totalChunks', totalChunks);
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var progressBar = document.getElementById('progressBar');
var percentage = Math.round(e.loaded / e.total * 100); // 計算上傳進度的百分比
progressBar.style.width = percentage + '%';
progressBar.innerHTML = percentage + '%';
}
};
xhr.open('POST', '/upload', true);
xhr.send(formData);
xhr.onload = function() {
currentChunk++;
if (currentChunk< totalChunks) {
uploadChunk();
} else {
alert('文件上傳完成！');
}
};
}
uploadChunk();

在上述代碼中，我們首先獲取上傳文件的數據，并將其分割成固定大小的分塊。然后，使用循環調用uploadChunk函數，逐個上傳每個分塊。通過XMLHttpRequest的upload.onprogress事件，我們可以實時獲得上傳進度的相關信息，并進行相應的處理。當最后一個分塊上傳完成后，彈出提示框，表示文件上傳完成。

通過以上的示例代碼，我們可以看到，利用AJAX技術實現文件上傳進度條并不復雜。通過分塊上傳的方式，我們可以在上傳過程中獲得實時的上傳進度，并將其反饋給用戶，提供更好的用戶體驗。