在Web開發中，使用Ajax來實現文件上傳是很常見的需求。然而，對于大文件的上傳，我們常常需要顯示上傳的進度，以提供用戶一個良好的體驗。以jQuery的$.ajax為例，本文將介紹如何使用$.ajax上傳文件并顯示上傳進度。

在開始之前，讓我們先看一下使用$.ajax上傳文件的示例代碼：

$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(response) {
console.log('文件上傳成功！');
}
});

上述代碼中，我們將文件上傳到名為upload.php的后端處理腳本中。formData是一個FormData對象，用于存儲上傳的文件。contentType和processData參數的值需要設置為false，以保證文件能夠正確地被發送到服務器。

接下來，我們需要監聽上傳的進度。在$.ajax中，我們可以使用xhr對象的upload屬性來實現。具體的代碼如下所示：

$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete * 100 + '% 已上傳');
}
}, false);
return xhr;
},
success: function(response) {
console.log('文件上傳成功！');
}
});

在上述代碼中，我們首先創建了一個XMLHttpRequest對象xhr，然后通過xhr.upload.addEventListener方法來監聽上傳的進度。事件對象evt中，evt.loaded表示已上傳的字節數，evt.total表示總字節數。通過計算這兩個值的比例，我們可以得到文件上傳的進度。

現在，讓我們通過一個例子來展示上述代碼的使用過程。假設我們有一個表單，其中包含一個文件上傳的input元素以及一個用于顯示上傳進度的進度條。我們的目標是在文件上傳過程中，實時更新進度條的值。

在上述例子中，我們通過使用jQuery的submit方法來監聽表單的提交事件。當用戶點擊"上傳"按鈕時，我們會阻止表單的默認行為，并通過FormData對象獲取到需要上傳的文件。然后，我們使用$.ajax方法來上傳文件，并通過監聽上傳進度的方式，實時更新進度條的值。

通過上述例子，我們可以看到使用$.ajax上傳文件并顯示上傳進度的方法。當然，這只是其中一種實現方式，開發者可以根據項目需求靈活選擇合適的方法。希望本文對你在文件上傳方面的開發有所幫助。