隨著Web應用的發展，對于文件上傳的需求也越來越多。在文件上傳過程中，用戶常常關心上傳進度，以便知道文件是否正在順利上傳或者上傳還需要多長時間。而Ajax技術的出現，為上傳進度的實時展示提供了方便。本文將介紹如何利用Ajax實現文件上傳進度的實時展示。

在傳統的文件上傳方式中，用戶需要等待整個文件上傳完成后才能看到結果。而利用Ajax技術，可以實現分段上傳，將文件分成多個片段進行上傳，這樣可以在上傳過程中實時地獲取上傳進度。

舉個例子來說明，假設有一個文件上傳頁面，用戶需要選擇一個文件進行上傳。用戶選擇了一個大小為10MB的文件。在傳統的上傳方式中，用戶需要等待10MB的文件上傳完成后才能看到上傳結果。而利用Ajax技術，可以將這個10MB的文件分成多個小塊，每上傳完一塊，就立即展示上傳進度。比如，上傳過程中可以顯示進度條，表示已經上傳了多少百分比的文件。

function uploadFile(file) {
// 將文件分成多個片段
var fileSize = file.size;
var chunkSize = 1024 * 1024; // 每片段大小為1MB
var chunks = Math.ceil(fileSize / chunkSize);
var progress = 0;
var uploadedChunks = 0;
// 上傳每個片段
for (var i = 0; i< chunks; i++) {
var start = i * chunkSize;
var end = Math.min(start + chunkSize, fileSize);
var formData = new FormData();
formData.append('file', file.slice(start, end));
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
// 計算上傳進度
progress = Math.round((uploadedChunks + e.loaded / e.total) / chunks * 100);
// 更新進度條顯示
document.getElementById('progress').innerHTML = '上傳進度：' + progress + '%';
}
};
// 上傳片段
xhr.open('POST', 'upload.php', true);
xhr.send(formData);
}
}

在上面的代碼中，我們使用了JavaScript中的XMLHttpRequest對象實現了文件的分段上傳，并通過onprogress事件實時更新上傳進度。通過不斷累加上傳的片段數和已上傳大小，再除以總片段數，就可以計算出當前的上傳進度。

這樣，用戶就可以在文件上傳過程中實時看到上傳進度，無需等待整個文件上傳完成。這對于一些大文件或者網速較慢的用戶來說，是非常有用的。

總結起來，利用Ajax技術實現文件上傳進度的實時展示可以提升用戶體驗。用戶可以在上傳過程中即時了解到上傳進度，無需等待整個文件上傳完成。這對于一些大文件的上傳或者網速較慢的用戶來說，是非常有幫助的。