原生JavaScript实现异步多文件上传

2023年5月27日上午7:02 • JavaScript

下面是原生JavaScript 实现异步多文件上传的完整攻略，主要分为以下部分：

基本概念
实现步骤
示例1：上传单个文件
示例2：上传多个文件

基本概念

异步多文件上传是一种常见的Web开发需求，它可以让用户一次性上传多个文件，而不是像传统的文件上传那样一次只能上传一个文件。异步多文件上传通常使用Ajax和FormData实现。

在介绍如何实现异步多文件上传之前，先对一些基本概念进行介绍：

FormData：是一种新的WebAPI，可以让开发者以一种更加便捷、简单的方式来提交表单数据，包括上传文件。
XMLHttpRequest对象（简称XHR）：是Ajax请求的核心，用于向Web服务器发起异步请求，获取服务的响应数据。

这两个对象将是本教程实现异步多文件上传的主要工具。

实现步骤

下面介绍如何实现异步多文件上传的主要步骤：

创建一个表单元素，并设置enctype="multipart/form-data"属性，用于支持文件上传；
监听表单元素的submit事件，阻止表单的默认行为；
创建FormData对象，通过FormData对象收集表单数据和文件；
创建XMLHttpRequest对象，设置相关属性、监听事件；
发送Ajax请求，将FormData对象作为参数传递给xhr.send()方法；
服务器逻辑处理完请求，将响应数据传回前端，前端解析响应数据或跳转。

示例1：上传单个文件

下面是上传单个文件的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传单个文件</title>
</head>
<body>
<form id="file-form">
<input type="file" name="file1" id="file1">
<button type="submit">上传</button>
</form>
<script>
window.onload = function() {
document.getElementById('file-form').addEventListener('submit', function(event) {
event.preventDefault(); //阻止表单默认submit事件
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('file1', document.getElementById('file1').files[0]); //获取file输入框的文件对象
xhr.onreadystatechange= function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText); //展示服务器返回的结果
}
}
xhr.open('POST', 'upload.php'); //请求url
xhr.send(formData); //将FormData对象传递给send()方法
});
}
</script>
</body>
</html>

在以上代码中，我们给表单元素添加了id="file-form"属性和一个file类型的输入框，用于上传单个文件。在表单submit事件触发时，我们创建了一个XMLHttpRequest对象，并获取了表单的所有输入数据和文件，然后通过xhr.send()方法，将FormData对象作为参数发送给服务器。

在服务器处理完请求之后，通过xhr.responseText可以拿到前端解析响应数据或跳转。

示例2：上传多个文件

下面是上传多个文件的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传多个文件</title>
</head>
<body>
<form id="file-form">
<input type="file" name="file1" id="file1"><br>
<input type="file" name="file2" id="file2"><br>
<input type="file" name="file3" id="file3"><br>
<button type="submit">上传</button>
</form>
<script>
window.onload = function() {
document.getElementById('file-form').addEventListener('submit', function(event) {
event.preventDefault(); //阻止表单默认submit事件
var xhr = new XMLHttpRequest();
var formData = new FormData();
var fileInputs = document.querySelectorAll('input[type=file]'); //获取所有file输入框元素
for (var i = 0; i < fileInputs.length; i++) {
formData.append(fileInputs[i].name, fileInputs[i].files[0]); //将每个file输入框的文件对象添加到FormData对象中
}
xhr.onreadystatechange= function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText); //展示服务器返回的结果
}
}
xhr.open('POST', 'upload.php'); //请求url
xhr.send(formData); //将FormData对象传递给send()方法
});
}
</script>
</body>
</html>

与上传单个文件类似，不同点在于获取所有file输入框元素，并将每个file输入框的文件对象添加到FormData对象中。

以上是原生JavaScript实现异步多文件上传的完整攻略，如果有不太理解的地方可以再次向我提问，我会尽力帮助您理解。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生JavaScript实现异步多文件上传 - Python技术站