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上传文件并实时显示上传进度是十分简单的。通过设置进度回调函数，我们可以在上传过程中动态更新进度条或显示上传进度百分比，从而提升用户体验。在实际开发中，我们可以根据具体的需求来选择不同的展示方式，例如使用进度条、显示百分比或者其他形式的提示等。无论选择哪种方式，都能够使用户更加清楚地了解文件上传的进度。