文件上传是Web开发中常见的功能之一，通常用于用户上传图片、视频或其他文件到服务器。原始的文件上传方式是通过表单的enctype属性设置为"multipart/form-data"，然后在提交表单时将文件一并发送到服务器。然而，这种方式会导致页面刷新，给用户体验带来不便。为了能够实现无刷新上传文件的功能，我们可以使用Ajax和FormData对象来实现。本文将介绍如何使用Ajax和FormData对象来实现文件上传，并通过举例来说明其使用方法和优势。

Ajax是一种使用JavaScript进行异步通信的技术，通过它我们可以在不刷新页面的情况下与服务器进行交互。而FormData是一种用于创建表单数据的对象，它可以轻松地将表单数据以键值对的形式进行封装，并且可以用于上传文件。通过结合这两种技术，我们可以实现无刷新的文件上传，给用户带来良好的体验。

首先，我们需要创建一个包含文件上传功能的表单。例如，我们假设有一个简单的页面，其中包含一个文件选择框和一个上传按钮：

<form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="上传" onclick="uploadFile()">
</form>

在JavaScript代码中，我们需要编写一个函数来处理文件上传的逻辑。在这个函数中，我们首先创建一个FormData对象，并将表单数据添加到对象中：

function uploadFile() {
var fileInput = document.getElementById("fileToUpload");
var file = fileInput.files[0];
var formData = new FormData();
formData.append("fileToUpload", file);
}

上述代码中，我们通过getElementById方法获取到文件选择框的元素，然后获取到用户选择的文件，并创建一个FormData对象。接下来，我们可以使用Ajax来发送这个FormData对象，将文件上传到服务器：

function uploadFile() {
var fileInput = document.getElementById("fileToUpload");
var file = fileInput.files[0];
var formData = new FormData();
formData.append("fileToUpload", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(formData);
}

在上述代码中，我们创建了一个XMLHttpRequest对象，并使用open方法指定请求的方法、URL和是否异步。然后，我们通过onreadystatechange事件来监听请求的状态变化，并在请求完成后将服务器的响应输出到控制台。最后，我们通过send方法发送FormData对象到服务器。

通过使用Ajax和FormData对象，我们成功实现了文件的无刷新上传。用户可以选择文件并点击上传按钮，上传的过程中页面不会刷新，上传完成后会输出服务器的响应结果。这种方式极大地提高了文件上传的用户体验。

除了上传单个文件，FormData对象还支持上传多个文件。例如，我们可以使用多个文件选择框来实现多文件上传的功能：

<input type="file" name="file1" id="file1">
<input type="file" name="file2" id="file2">
<input type="button" value="上传" onclick="uploadFiles()">
function uploadFiles() {
var fileInput1 = document.getElementById("file1");
var file1 = fileInput1.files[0];
var fileInput2 = document.getElementById("file2");
var file2 = fileInput2.files[0];
var formData = new FormData();
formData.append("file1", file1);
formData.append("file2", file2);
var xhr = new XMLHttpRequest();
// ...
}

通过为不同的文件选择框指定不同的name属性，并在FormData对象中通过append方法添加文件，我们就可以同时上传多个文件。

总结来说，使用Ajax和FormData对象可以实现无刷新的文件上传，并提高用户的交互体验。通过将文件封装到FormData对象中，我们可以轻松地发送文件的同时，还可以携带其他的表单数据。无论是上传单个文件还是多个文件，都可以使用这种方式来实现。