怎样实现多文件批量上传_MULTIPLE属性应用于文件控件-html教程-PHP中文网

multiple 属性必须显式声明才能启用文件多选功能，否则浏览器对话框不显示多选选项；event.target.files 是 FileList，需用 [...files] 或 Array.from() 转数组后操作；上传多文件应循环调用 formData.append('file', file)，避免覆盖；需校验总大小与数量，并注意 iOS Safari 兼容性。

怎样实现多文件批量上传_multiple属性应用于文件控件

file input 的 `multiple` 属性必须显式声明才能触发多选

浏览器不会默认允许一次选多个文件，哪怕你按住 Ctrl 或 Cmd 点击—— 必须带 multiple 属性，否则系统对话框里连「选择多个文件」的选项都不会出现。常见错误是只写了 accept 或 name，漏掉 multiple，结果用户反复尝试双击、拖拽都无效。

正确写法示例：

<input type="file" multiple accept=".pdf,.jpg,.png" id="upload">

注意：multiple 是布尔属性，写成 multiple="multiple" 也行，但仅写 multiple 更简洁且语义清晰；不要写成 multiple="true"，部分旧版 Safari 会忽略。

用 `event.target.files` 获取全部选中的文件对象

input[type=file] 的 files 属性返回的是 FileList，不是数组，不能直接调用 .map() 或 .forEach()。常见误操作是把它当数组解构或遍历失败，报 TypeError: files.map is not a function。

推荐做法：

用扩展运算符转成数组：[...event.target.files]
或用 Array.from(event.target.files)
避免直接对 files 调用数组方法

示例（监听 change 后批量读取文件名）：

document.getElementById('upload').addEventListener('change', (e) => {
  const files = [...e.target.files];
  files.forEach(f => console.log(f.name, f.size));
});

上传时用 `FormData.append()` 多次追加同名字段

后端接收多文件通常期望多个同名字段（如 files[] 或 file），而不是一个字段带多个文件。如果只调用一次 formData.append('file', file)，只会提交最后一个文件。

正确方式是循环追加，且 key 名保持一致（后端据此识别为数组）：

const formData = new FormData();
for (const file of files) {
  formData.append('file', file); // 不要加索引，不要用 'file[0]'
}

补充说明：

某些后端框架（如 Express + multer）依赖字段名是否带 [] 来判断是否接收多文件，此时应设为 formData.append('file[]', file)
若后端要求每个文件有独立字段名（如 file_0, file_1），需手动拼接，但非常规做法，易增加解析负担
FormData 会自动处理二进制边界，无需手动设置 Content-Type 头