现在的网页应用越来越多地使用ajax来实现文件上传功能。ajax文件上传可以实现页面不刷新的情况下上传文件，并且可以显示上传进度。在本文中，我们将探讨如何使用ajax实现文件上传并显示上传进度。

在传统的文件上传方式中，用户选择文件后，需要点击提交按钮，然后等待页面刷新，上传文件过程中用户无法知道上传进度。而使用ajax上传文件，用户可以实时看到上传进度，无需页面刷新。

首先，我们需要一个表单来供用户选择文件。为了使用ajax上传文件，我们将form的action属性设为一个处理文件上传的文件，同时将form的enctype属性设为“multipart/form-data”，以支持文件上传。

<form id="fileForm" action="upload.php" method="post" enctype="multipart/form-data"><input type="file" name="file" id="file"><br><input type="button" value="上传" onclick="uploadFile()"></form>

接下来，我们编写JavaScript函数uploadFile()来处理文件上传。该函数中使用了FormData对象来构建一个包含文件的表单数据对象。然后，通过XMLHttpRequest对象的upload属性来监听上传进度，并将进度显示在页面上。

function uploadFile() {
var fileInput = document.getElementById('file');
var file = fileInput.files[0];
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percent = (event.loaded / event.total) * 100;
document.getElementById('progress').innerHTML = Math.round(percent) + '%';
}
};
xhr.open("POST", "upload.php", true);
xhr.send(formData);
}

在页面上，我们添加一个用于显示上传进度的元素。这里使用一个简单的0%元素来显示上传进度。

当用户点击上传按钮时，JavaScript函数uploadFile()会被调用。该函数首先获取用户选择的文件，然后使用FormData对象将文件添加进表单数据。接着，创建XMLHttpRequest对象并监听上传进度。在进度监听函数中，通过event.loaded和event.total属性计算出上传进度的百分比，并将其显示在页面上。

上传进度显示的效果可以根据实际需求进行美化。例如，可以使用进度条来展示上传进度。在CSS中定义一个进度条样式，并在页面上添加一个显示进度的元素。

#progress {
width: 200px;
height: 20px;
border: 1px solid #ccc;
}
#progress-bar {
width: 0;
height: 100%;
background-color: #4CAF50;
}

在JavaScript中，更新进度条的宽度即可实现上传进度的展示。

xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percent = (event.loaded / event.total) * 100;
document.getElementById('progress-bar').style.width = Math.round(percent) + '%';
}
};

通过上述步骤，我们成功地实现了使用ajax上传文件，并在页面上显示上传进度的功能。当用户选择文件并点击上传按钮后，上传进度将实时显示在页面上，给用户一个直观的上传体验。

总结来说，通过ajax上传文件可以实现页面不刷新的文件上传，并可以显示上传进度。我们可以使用FormData对象来构建包含文件的表单数据，使用XMLHttpRequest对象的upload属性来监听上传进度，并通过JavaScript来更新页面上的进度条或百分比显示。这样，用户可以方便地上传文件，并实时了解上传进度。