在前端开发中，当需要上传文件时，我们通常会使用表单提交来实现。然而，传统的表单提交会导致页面跳转，而且无法提供上传进度的实时反馈。为了解决这些问题，我们可以利用 AJAX 进行异步文件上传。本文将介绍如何使用 AJAX 实现异步文件上传，并提供上传进度的反馈。
准备工作
在开始之前，我们需要确保以下内容已经准备好：
- 基本的 HTML 页面。
- 一个用于接收上传文件的后端 API。
HTML 页面布局
首先，我们需要在 HTML 页面中创建一个文件上传表单。可以使用 <form> 元素来实现。
<form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="fileInput">
<button type="submit">上传</button>
</form>
在这个表单中，我们使用了 input 标签的 type="file" 属性来创建一个文件选择框。当用户选择文件后，点击上传按钮时，表单数据将被提交到指定的后端 API。
异步文件上传
使用 AJAX 进行异步文件上传可以通过 FormData 对象实现。FormData 对象允许我们构建表单数据，并使用 AJAX 将其发送到后端。
以下是一个使用 AJAX 进行异步文件上传的示例代码：
document.getElementById("uploadForm").addEventListener("submit", function(e) {
e.preventDefault(); // 阻止表单提交
var formData = new FormData();
var fileInput = document.getElementById("fileInput");
formData.append("file", fileInput.files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
var progress = Math.round((e.loaded / e.total) * 100);
console.log(progress + "%");
}
}, false);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(formData);
});
在这个示例中，我们首先阻止了表单的默认提交行为，然后创建了一个 FormData 对象，并将文件选择框中的文件添加到其中。接下来，我们创建一个 XMLHttpRequest 对象，并打开一个 POST 请求，并指定了上传文件的后端 API。
为了获取上传进度的反馈，我们注册了 xhr.upload 对象的 progress 事件。在这个事件的处理函数中，我们可以通过 e.loaded 和 e.total 属性计算出当前上传进度的百分比。然后，我们可以使用这个进度信息来更新页面上的进度条或其他需要的反馈。
最后，我们为 xhr.onreadystatechange 注册了一个回调函数，用于处理上传完成后的响应。在这里我们可以对服务器返回的数据进行处理，比如显示上传成功信息或者其他操作。
总结
在本文中，我们学习了如何利用 AJAX 进行异步文件上传。通过使用 FormData 对象和 XMLHttpRequest 对象，我们可以实现文件的异步上传，并提供上传进度的实时反馈。这种方式可以使我们的文件上传交互更加友好，并提升用户体验。
希望本文能对您在前端开发中使用 AJAX 进行异步文件上传有所帮助！
本文来自极简博客，作者：黑暗猎手，转载请注明原文链接：如何利用AJAX进行异步文件上传
