文件上传是Web开发中常见的功能之一，它允许用户从本地计算机向服务器上传文件。JavaScript可以方便地实现文件上传功能，并提供一些额外的控制和交互选项。本文将向您展示如何使用JavaScript实现文件上传功能。
HTML部分
首先，在HTML文件中创建一个表单，其中包含一个文件输入字段和一个提交按钮。请确保为表单指定一个适当的id，以便在JavaScript代码中引用它。
<form id="uploadForm">
<input type="file" id="fileInput" name="fileInput">
<button type="submit">上传文件</button>
</form>
JavaScript部分
使用JavaScript处理文件上传需要通过事件监听器来处理表单的提交动作，并在提交时执行相应的操作。以下是实现文件上传的JavaScript代码。
// 获取表单和输入字段的引用
var form = document.getElementById("uploadForm");
var fileInput = document.getElementById("fileInput");
// 监听表单的提交事件
form.addEventListener("submit", function (event) {
event.preventDefault();
// 确认是否选择了要上传的文件
if (fileInput.files.length === 0) {
alert("请选择要上传的文件");
return;
}
// 创建FormData对象，用于存储要上传的文件
var formData = new FormData();
formData.append("file", fileInput.files[0]);
// 创建XMLHttpRequest对象，用于发送文件数据
var xhr = new XMLHttpRequest();
// 监听XHR对象的进度事件，以便获取上传进度
xhr.upload.addEventListener("progress", function (event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total * 100;
console.log("上传进度：" + percentComplete.toFixed(2) + "%");
}
}, false);
// 监听XHR对象的完成事件，以便获取服务器的响应
xhr.addEventListener("load", function (event) {
if (xhr.status === 200) {
console.log("上传成功");
} else {
console.log("上传失败：" + xhr.statusText);
}
}, false);
// 发送XHR请求，将文件数据提交给服务器
xhr.open("POST", "upload.php");
xhr.send(formData);
});
文件选择
在代码中，我们首先通过getElementById方法获取表单和文件输入字段的引用。然后，我们使用addEventListener方法监听表单的submit事件。在事件处理函数中，我们首先阻止默认的表单提交行为（即页面刷新），然后检查用户是否选择了要上传的文件。
FormData对象
要将文件数据发送到服务器，我们需要使用FormData对象。FormData对象提供了一种便捷的方式来构建包含键值对（其中键是表单字段的名称）的文本数据，并且可以附加文件类型的数据。
我们使用append方法将文件数据添加到FormData对象中。在本例中，我们只上传了一个文件，所以我们使用fileInput.files[0]来获取第一个文件对象。
XMLHttpRequest对象
然后，我们创建了一个XMLHttpRequest对象，它用于发送文件数据到服务器。我们使用upload属性的addEventListener方法监听上传进度事件，并在事件处理函数中获取上传进度信息。
接着，我们监听load事件，以便在上传完成后获取服务器的响应信息。在事件处理函数中，我们可以检查XHR对象的状态码来判断上传是否成功。
最后，我们调用open方法打开与服务器的连接，并使用send方法发送文件数据。
注意事项
请注意，由于浏览器的CORS（跨域资源共享）策略，您可能需要在服务器上进行一些配置，以允许跨域上传文件。
总结
使用JavaScript实现文件上传功能相对简单，但涉及一些重要的概念和技术。通过阅读本文，您应该能够了解如何使用JavaScript实现文件上传功能，并根据实际需求进行相应的调整和扩展。请记住在发送文件数据时遵循最佳实践，并考虑用户体验和数据安全性。
注意：本文归作者所有，未经作者允许，不得转载
