input 上传多个文件

使用 multiple 属性实现文件多选上传

问题

input 文件上传时如何同时选择多个文件？

解答

给 <input type="file"> 添加 multiple 属性即可实现多文件选择：

<input type="file" name="files" multiple />

添加该属性后，用户在文件选择对话框中可以按住 Ctrl（Windows）或 Command（Mac）键选择多个文件，或使用 Shift 键选择连续的多个文件。

在 JavaScript 中获取选中的文件：

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  const files = e.target.files; // FileList 对象
  console.log(`选择了 ${files.length} 个文件`);
  
  // 遍历文件
  Array.from(files).forEach(file => {
    console.log(file.name, file.size);
  });
});

关键点

multiple 属性允许用户一次选择多个文件
选中的文件存储在 input.files 中，类型为 FileList
FileList 是类数组对象，可用 Array.from() 转换为数组
不加 multiple 属性时，只能选择单个文件