HTML输入标签选择多个文件
在前端开发中，文件上传是一个常见的需求。而其中选择多个文件的功能，在HTML中是可以通过<input>标签实现的。本文将详细介绍如何使用<input>标签实现多文件选择上传功能。
input标签的type属性值为file
要让<input>标签支持文件上传，需要将其type属性值设置为file，如下所示：
<input type="file">这样就能看到一个文件选择的按钮了。
选择多个文件
默认情况下，<input>标签只允许选择一个文件，并且只有文件名会被上传。而要实现多文件选择上传功能，需要使用multiple属性。代码如下：
<input type="file" multiple>这样就可以一次性选择上传多个文件了。
如何获取已选择的文件列表
使用JavaScript获取文件列表
当用户选择一个或多个文件，选择完成后，就需要立即获取文件信息，以在用户上传文件之前进行必要的验证，例如文件大小和文件类型。我们可以使用JavaScript来获取选择的文件列表。由于浏览器安全限制，直接访问文件路径并打开文件是不被允许的。但是，可以访问文件对象及其属性。对于每个<select>标签选择文件，都可以使用file属性来获得File对象列表。在JavaScript中，File对象本身是包含文件选择的文件的元数据和内容的对象。以下代码显示如何使用JavaScript来获取所选文件列表的名称和大小：
const inputElement = document.querySelector('input[type="file"]');
inputElement.addEventListener('change', (e) => {
const files = inputElement.files;
for(let i = 0; i < files.length; i++) {
const fileInfo = {
filename: files[i].name,
size: files[i].size + ' bytes'
}
console.log(fileInfo);
}
});
上述代码将遍历所选文件，并将每个文件的名称和大小打印到浏览器的控制台中。
使用FormData对象获取文件列表
FormData是用于创建HTML表单时收集表单数据的标准方法。此API可以将表单数据编码为键/值对，以便与XMLHttpRequest一起进行传输。
可以使用FormData对象将所选文件一起上传至服务器。以下是使用FormData对象收集所选文件并在form-data中将它们上传到服务器的示例代码。
const files = document.querySelector('input[type="file"]').files;
const formData = new FormData();
for(let i = 0; i < files.length; i++) {
formData.append('file', files[i], files[i].name);
}
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);
上述代码将遍历所选文件，并将每个文件放置在名为file的键下。然后，使用XMLHttpRequest对象将formData对象上传到服务器上。formData对象可以通过append()方法来添加一次性上传多个文件。
总结
本文介绍了如何在HTML中使用<input>标签实现多文件上传功能。通过设置multiple属性，可以轻松地选择多个文件。使用JavaScript或FormData对象可以获取选择的文件列表，并可以将它们一起上传到服务器上。