AJAX（Asynchronous JavaScript and XML）是一种用于 Web 开发的技术，它允许我们向服务器发送异步请求并在不重新加载整个页面的情况下更新页面的一部分。通过 AJAX，我们可以以更快、更流畅的方式与服务器进行交互。

在 Web 开发中，有时候我们需要向服务器提交文件，比如图片、视频或文档等。使用 AJAX 和一些适当的技术，可以在不刷新整个页面的情况下实现文件上传功能。

在下面的示例中，我们将展示如何使用 AJAX 提交文件至服务器，并实时显示文件上传的进度。

function uploadFile(file) {
var xhr = new XMLHttpRequest();
// 创建 FormData 对象并将文件添加进去
var formData = new FormData();
formData.append('file', file);
// 监听 xhr 的上传进度
xhr.upload.addEventListener('progress', function(event) {
if (event.lengthComputable) {
var percentage = Math.round((event.loaded / event.total) * 100);
console.log('上传进度：' + percentage + '%');
}
});
// 定义请求的方法、URL 和是否异步
xhr.open('POST', '/upload', true);
// 发送请求
xhr.send(formData);
}

首先，我们创建一个 XMLHttpRequest 对象（xhr）。然后，我们创建一个 FormData 对象（formData），并将要上传的文件添加进去。formData 的 append 方法接受两个参数，第一个参数是字段的名称，第二个参数是要上传的文件对象。在这个示例中，我们假设文件的字段名称是 'file'。

接下来，我们监听 xhr 的 upload 事件，以便实时获取上传的进度。事件对象中的 loaded 属性表示已经上传的字节数，total 属性表示文件的总字节数。通过这两个属性，我们可以计算出上传的百分比。

<input type="file" id="fileInput" onchange="handleFileUpload()">
<script>
function handleFileUpload() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
uploadFile(file);
}
</script>

在 HTML 中，我们通过 input 元素的 type 属性设置为 'file' 来创建一个文件选择框。我们还给 input 元素设置了一个 id，以便可以通过 JavaScript 获取到该元素。

然后，我们编写一个 JavaScript 函数 handleFileUpload。在这个函数中，我们首先通过 document.getElementById 获取到 fileInput 元素，然后通过 files 属性获取到选择的文件对象。在这个示例中，我们假设只选择了一个文件。

最后，我们将文件对象传递给 uploadFile 函数进行上传。

使用上面的代码和技术，你可以轻松地实现 AJAX 文件上传的功能。通过监听上传进度，你还可以实时地展示上传的进度，给用户更好的体验。