AJAX上傳文件是在前端開發中常見的需求之一，通過使用AJAX技術可以實現文件的異步上傳和實時顯示上傳進度。進度回調函數可以在上傳過程中動態更新進度條或顯示上傳進度百分比，從而使用戶能夠清楚地了解文件上傳的進度。本文將介紹如何使用AJAX上傳文件并通過進度回調函數實時顯示上傳進度。

在實際開發中，我們經常會遇到需要上傳大文件或者多個文件的情況。例如，在一個論壇網站上，用戶可能需要上傳一張或多張圖片作為帖子的附件。如果用戶在上傳過程中沒有進度提示，那么當用戶上傳一個幾百M的文件時，可能會因為沒有任何反饋而無法判斷上傳是否正在進行，也無法知道還需要等待多長時間。因此，為了提升用戶體驗，我們需要通過進度回調函數來實時顯示上傳進度。

要實現文件上傳的進度回調，我們首先要使用AJAX技術將文件異步上傳到服務器上。在JavaScript中，我們可以使用FormData對象來構造待上傳的文件和其他表單數據，并通過XMLHttpRequest對象來發送請求。

// 創建FormData對象
var formData = new FormData();
// 添加要上傳的文件
formData.append('file', file);
// 添加其他表單數據
formData.append('name', name);
formData.append('email', email);
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置進度回調函數
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percent = Math.round((event.loaded / event.total) * 100);
console.log('上傳進度：' + percent + '%');
}
};
// 發送請求
xhr.open('POST', '/upload');
xhr.send(formData);

在上述代碼中，我們首先創建了FormData對象，然后使用append方法向其中添加要上傳的文件和其他表單數據。接著，我們創建了XMLHttpRequest對象，并通過xhr.upload.onprogress屬性來設置進度回調函數。在進度回調函數中，我們首先判斷event.lengthComputable屬性是否為true，該屬性表示是否能夠得到上傳文件的總大小。如果可以得到文件大小，則通過event.loaded和event.total屬性計算出上傳進度的百分比，并將其打印在控制臺中。

在上述代碼中，我們只是簡單地通過打印出上傳進度來展示其實現方式。在實際開發中，我們可以通過修改進度條的寬度或者顯示上傳進度百分比等方式來實時展示上傳進度。例如，我們可以通過下面的CSS和JavaScript代碼來實現一個簡單的進度條：

/* CSS代碼 */
#progress-bar {
width: 0%;
height: 10px;
background-color: blue;
}
/* JavaScript代碼 */
var progressBar = document.getElementById('progress-bar');
// 設置進度回調函數
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percent = Math.round((event.loaded / event.total) * 100);
progressBar.style.width = percent + '%';
progressBar.textContent = percent + '%';
}
};

在上述代碼中，我們首先通過CSS代碼定義了一個藍色的進度條，然后通過JavaScript代碼獲取到該進度條的DOM元素，并在進度回調函數中設置其寬度和文本內容，從而實時展示上傳進度。

通過以上的示例代碼，我們可以看到通過AJAX上傳文件并實時顯示上傳進度是十分簡單的。通過設置進度回調函數，我們可以在上傳過程中動態更新進度條或顯示上傳進度百分比，從而提升用戶體驗。在實際開發中，我們可以根據具體的需求來選擇不同的展示方式，例如使用進度條、顯示百分比或者其他形式的提示等。無論選擇哪種方式，都能夠使用戶更加清楚地了解文件上傳的進度。