AJAX (Asynchronous JavaScript and XML) 是一种用于在网页上异步加载数据的技术。而与传统的表单提交不同，AJAX 可以实现页面无刷新的数据交互。其中，FormData 是用于处理表单数据的一种对象，它可以通过 AJAX 请求将表单数据以文件的形式发送到服务器。

让我们以一个图片上传的例子来说明 AJAX FormData 文件的使用。假设我们有一个图片上传的表单，其中包括一个文件输入框和一个提交按钮。当用户选择了一张图片并点击提交按钮后，我们希望将该图片上传到服务器，并在上传过程中显示进度条。

首先，通过 JavaScript 获取表单元素和文件输入框：

var form = document.querySelector('form');
var fileInput = document.querySelector('input[type="file"]');
var progressBar = document.querySelector('.progress-bar');

接下来，我们需要对表单的提交事件进行监听，以便在用户点击提交按钮时触发 AJAX 请求：

form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单的默认提交行为
var formData = new FormData(); // 创建一个新的 FormData 对象
formData.append('image', fileInput.files[0]); // 将文件添加到 FormData 对象中
var xhr = new XMLHttpRequest(); // 创建一个新的 XMLHttpRequest 对象
xhr.open('POST', '/upload'); // 设置请求类型和 URL
xhr.upload.addEventListener('progress', function(e) {
var percent = (e.loaded / e.total) * 100; // 计算上传进度百分比
progressBar.style.width = percent + '%'; // 更新进度条的宽度
});
xhr.addEventListener('load', function() {
if (xhr.status === 200) {
console.log('图片上传成功！');
} else {
console.log('图片上传失败！');
}
});
xhr.send(formData); // 发送 AJAX 请求
});

在上述代码中，我们首先创建了一个新的 FormData 对象，并通过 append 方法将文件添加到 FormData 对象中。然后，创建了一个新的 XMLHttpRequest 对象，设置请求类型和 URL。接着，我们监听了 upload 事件，通过计算已上传的字节数和总字节数，更新进度条的宽度。最后，通过 send 方法发送了 AJAX 请求。

需要注意的是，将文件添加到 FormData 对象时，我们使用了文件输入框的 files 属性。该属性返回一个 FileList 对象，其中包含用户选择的文件列表。我们通过索引 [0] 获取到用户选择的第一个文件，并将其添加到 FormData 对象中。如果需要上传多个文件，可以使用循环遍历 FileList 对象，将每个文件都添加到 FormData 对象中。

除了文件上传，FormData 还可以处理其他类型的表单数据。比如，我们可以使用 append 方法将文本输入框的值添加到 FormData 对象中：

var textField = document.querySelector('input[type="text"]');
formData.append('text', textField.value);

在这篇文章中，我们了解了如何使用 AJAX FormData 文件来实现图片上传功能。通过 FormData 对象，我们可以将文件和其他表单数据一并发送到服务器，并且在上传过程中实时显示进度条。这种方式比传统的表单提交更加灵活和交互友好。