在现代web开发中，文件上传是一个常见的需求。尤其是对于需要用户上传大量文件的应用，如图片分享网站或文件管理系统等。使用传统的form表单上传文件的方式，存在着一些限制，比如需要刷新页面、无法实时展示上传进度等。好在我们有现代web技术的加持，其中之一就是Ajax技术。本文将介绍如何通过Ajax上传文件到指定目录，并展示实时上传进度。

首先，我们需要一个后端接口来处理文件上传的请求，并将文件保存到指定的目录中。一种常见的实现方式是通过服务器端编程语言（如PHP、Python等）来处理文件上传。比如我们使用PHP来实现后端接口。

<?php
// 指定的上传目录
$uploadDir = '/upload/';
// 获取上传文件的相关信息
$fileName = $_FILES['file']['name'];
$fileSize = $_FILES['file']['size'];
$tmpName = $_FILES['file']['tmp_name'];
// 移动文件到上传目录
if (move_uploaded_file($tmpName, $uploadDir . $fileName)) {
// 文件上传成功
echo '文件上传成功！';
} else {
// 文件上传失败
echo '文件上传失败！';
}
?>

在这段PHP代码中，我们首先指定了上传文件的目录（如/upload/），然后通过$_FILES数组获取上传文件的相关信息，包括文件名、文件大小和临时文件名等。接着，我们使用move_uploaded_file函数将临时文件移动到指定的目录中。移动成功则返回成功的提示，否则返回失败的提示。

接下来，我们通过Ajax来实现文件的上传。jQuery是一个流行的JavaScript库，它提供了丰富的操作DOM和Ajax的方法。我们可以使用它来简化Ajax请求的编写：

$('input[type="file"]').on('change', function() {
var file = this.files[0];
var formData = new FormData();
formData.append('file', file);
$.ajax({
url: '/upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function(evt) {
if (evt.lengthComputable) {
var percent = Math.round((evt.loaded / evt.total) * 100);
// 更新上传进度
$('.progress').text('上传进度：' + percent + '%');
}
}, false);
return xhr;
},
success: function(response) {
// 处理上传成功的结果
$('.result').text(response);
},
error: function() {
// 处理上传失败的结果
$('.result').text('文件上传失败！');
}
});
});

这段代码首先监听了input[type="file"]的change事件，当用户选择文件后，触发Ajax请求。我们首先创建了一个FormData对象，将用户选择的文件添加到其中。然后通过$.ajax方法发送POST请求到/upload.php接口，同时设置processData和contentType选项为false，这样可以防止jQuery对FormData进行默认的处理和设定Content-Type。接着，我们使用xhr.upload.addEventListener方法来监听上传进度，计算上传进度的百分比并实时更新到页面上。最后，当请求成功时，我们将上传成功的结果显示到.result元素中；当请求失败时，显示失败的提示信息。

通过上述的方式，我们可以实现文件的异步上传，并实时展示上传进度。这对于用户上传大文件或多个文件时，提供了更好的用户体验。

总结起来，使用Ajax可以方便地上传文件到指定目录，并实时展示上传进度。我们通过后端的PHP脚本将上传文件保存到指定目录，然后使用jQuery的$.ajax方法发送异步请求，处理服务器端的返回结果并更新页面内容。这种方式不仅提升了用户体验，还提供了更多的灵活性。