单选和多选文件上传失败主因是multiple属性缺失、enctype未设为multipart/form-data、input.files误当数组用；input.files需转Array.from或展开运算符处理；FormData应同key多次append，name带[]与否依后端框架而定。
单选和多选上传不是“学不会”，而是容易卡在几个硬性条件上：multiple漏写、enctype没设、input.files误当成数组用——只要对齐这三点，代码一跑就通。
为什么加了 multiple 还是只能选一个文件
这不是浏览器bug，也不是JS没写对，而是HTML层就失效了。常见原因有三个：
-
multiple属性必须直接写在<input type="file">标签里，单独写<input multiple>无效 - 表单没设
enctype="multipart/form-data"，文件数据根本不会发出去，后端收不到任何文件字段 - 用户在 iOS 16.4 以下 Safari 中操作——那个版本的 Safari 会静默忽略
multiple，不报错也不支持，只能提示升级或换浏览器
input.files 不是数组，但你得当它像数组一样用
input.files 是 FileList 对象，类数组但没有 forEach、map 等方法。直接调用会报 TypeError: input.files.forEach is not a function。
- 安全转成真数组：
Array.from(input.files)或[...input.files] - 遍历时别用
for...in，它遍历的是属性名（如length、item），不是文件项 - 每个
file是File实例，有name、size、type，可用于校验：if (file.size > 5 * 1024 * 1024) { /* 超过5MB */ } -
input.value只返回第一个文件的伪造路径（如C:\fakepath\abc.jpg），多文件场景下完全没用
FormData 传多个文件时 key 名怎么写才不丢
后端只收到一个文件？大概率是前端 FormData.append() 写错了。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：用相同 key 多次
append，例如formData.append('files', file1); formData.append('files', file2); - ❌ 错误：以为要拼接数组或 JSON 字符串，比如
formData.append('files', [file1, file2])—— 这会把整个数组转成字符串[object File],[object File] - 不要手动设置
Content-Type请求头，让浏览器自动设为multipart/form-data并生成 boundary - 调试时看 Network → Payload，确认每个文件是否作为独立条目出现，而不是合并成一个 blob
最易被忽略的点：name 属性带不带 [] 看后端框架。PHP 喜欢 name="files[]"，Express 的 multer 用 upload.array('files') 就对应 name="files"。写错一个字符，后端解析就全乱。
