AJAX 是一種在網頁上實現異步數據交互的技術，它可以使網頁更加動態、快速地加載內容并提高用戶體驗。其中一種常見的應用場景是文件上傳。本文將介紹如何使用 AJAX 來顯示文件上傳的進度條。

在談及文件上傳進度時，一種常見的方法是使用 AJAX 加載文件并顯示進度條。通過監聽上傳過程中的事件和計算已上傳的字節數，我們可以動態地更新進度條。

首先，我們需要設置一個文件上傳的表單。下面是一個簡單的示例代碼：

<form id="uploadForm" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="fileInput">
<input type="submit" value="上傳" >
</form>

接下來，我們需要使用 AJAX 來進行文件上傳。在上傳之前，我們需要監聽文件上傳表單的 onsubmit 事件：

document.getElementById('uploadForm').onsubmit = function(e) {
e.preventDefault(); // 阻止默認的表單提交行為
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
// 創建一個 FormData 實例并添加文件
var formData = new FormData();
formData.append('file', file);
// 創建一個新的 XMLHttpRequest 對象并設置監聽事件
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percent = (e.loaded / e.total) * 100;
console.log('上傳進度：' + percent + '%');
}
};
// 發送 AJAX 請求
xhr.open('POST', '/upload', true);
xhr.send(formData);
};

在上述代碼中，我們為 XMLHttpRequest 對象的 upload 屬性設置了 onprogress 事件監聽器。這個事件監聽器在上傳過程中會被觸發，傳遞一個 ProgressEvent 對象作為參數。我們通過這個對象的 loaded 和 total 屬性計算出上傳的百分比，并將其打印到控制臺上。

現在，我們可以將進度條顯示在頁面上。在 HTML 中添加一個進度條元素：

<div id="progressBar" style="width: 0;"></div>

接下來，我們修改 AJAX 代碼，使用計算出的百分比來更新進度條寬度：

// 修改代碼
// ...
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percent = (e.loaded / e.total) * 100;
var progressBar = document.getElementById('progressBar');
progressBar.style.width = percent + '%';
}
};
// ...

在上述代碼中，我們首先獲取了進度條的元素，然后通過修改其 style 屬性中的 width 來調整進度條的寬度。這樣，我們就可以通過 AJAX 實時地顯示文件上傳的進度條了。

盡管以上代碼是一個簡化版本，使用了基本的 HTML、CSS、JavaScript 和 AJAX 技術，但是它提供了一個有效的方法來顯示文件上傳的進度條。根據實際需求，我們可以進一步改進代碼以滿足更多功能的要求。

總而言之，通過使用 AJAX 技術，我們可以實現動態地顯示文件上傳的進度條。這不僅可以讓用戶了解文件上傳的進展情況，更可以提高用戶體驗和操作便利性。