最近在做一個上傳文件的應用，需要實時顯示文件的上傳進度，于是利用了Ajax和jQuery來完成。下面分享一下我自己的做法。

首先，在HTML頁面中創建一個文件上傳表單，并添加一個進度條：

<form id="upload-form" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">上傳</button>
</form>
<div id="progress-bar"></div>

然后，在JavaScript中使用jQuery來處理表單的提交事件，并使用Ajax來實現文件的異步上傳。

$(document).on("submit", "#upload-form", function(event) {
event.preventDefault(); // 阻止表單默認提交行為
var formData = new FormData(this); // 獲取表單數據
var xhr = new XMLHttpRequest(); // 創建XMLHttpRequest對象
xhr.upload.addEventListener("progress", function(event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total * 100;
$("#progress-bar").css("width", percentComplete + "%"); // 更新進度條
}
}, false);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText); // 表示上傳成功
}
};
xhr.open("POST", "upload.php", true); // 創建并打開POST請求，true表示異步請求
xhr.send(formData); // 發送表單數據
});

上面的代碼中，我們使用了XMLHttpRequest的upload對象來監聽上傳進度事件，并根據已上傳的字節數和總字節數計算出上傳進度百分比。然后，我們利用jQuery來更新進度條的樣式。在XMLHttpRequest的onreadystatechange事件中，當服務器返回成功狀態碼200時，表示文件上傳成功。

最后，在后端的upload.php文件中，我們可以像處理普通的表單數據一樣，通過$_FILES數組獲取上傳的文件信息。這里就不貼出PHP代碼了，大家可以根據自己的項目需要進行相應的處理。