加了multiple仍只能选一个文件，是因为漏了三个硬性条件：form必须设enctype="multipart/form-data"，input必须显式写multiple属性，name建议用files[]数组形式；ios 16.4以下还存在静默失效问题。

加了 multiple 属性却只能选一个文件？不是浏览器问题，是 HTML 结构漏了硬性条件。

必须同时满足的三个 HTML 硬性条件

缺一不可，JS 无法补救：

• <form></form> 标签必须带 enctype="multipart/form-data" —— 没它，文件数据根本不会发出去
• <input type="file"> 必须显式写 multiple，不能靠 JS 添加：它是个布尔属性，只写 multiple 就生效，写 multiple="false" 也照样启用多选
• name 建议用数组形式，如 name="files[]"：PHP 自动收为二维数组；Express + multer 的 upload.array('files') 也依赖这个 key 名；若写成 name="files"，PHP 会覆盖字段，只剩最后一个文件

为什么 input.files 不能直接 .forEach()

因为它是只读的 FileList，不是数组，没有原型方法：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 错误写法：input.files.forEach(...) → 报 TypeError: not a function
• 安全转数组：Array.from(input.files) 或 [...input.files]
• 别用 input.value 获取文件名——它只返回第一个文件的伪造路径（如 C:\fakepath\photo.jpg），对多文件无意义
• 每个 file 是 File 实例，有 name、size、type、lastModified，但 file.path 在所有现代浏览器中都是 undefined

iOS Safari 多文件失效的隐藏陷阱

iOS 16.4 以下版本（含 16.3）会静默忽略 multiple，input.files.length 永远是 1，且无任何提示或报错：

• 检测方式：navigator.userAgent.includes('iPhone') && /OS [1-9]\d?_[0-3]/.test(navigator.userAgent)
• 没有降级方案：无法用 JS 模拟多次点击绕过，这是系统级限制
• 能做的只有 UA + 版本检测后，明确提示用户“请升级至 iOS 16.4+ 或改用 Chrome for iOS”

FormData 里 key 名怎么填才让后端收到全部文件

关键不是前端“塞了多少个”，而是后端能否识别同名多值：

• ✅ 正确：formData.append('files', file1); formData.append('files', file2); —— 后端需启用「同名多值」解析（Express 用 upload.array('files')，PHP 遍历 $_FILES['files']['name']）
• ❌ 错误：formData.append('files', input.files) —— input.files 是 FileList，不是可序列化对象，行为不一致，Firefox 直接丢
• 别手动设 Content-Type 请求头：浏览器会自动设为 multipart/form-data 并生成正确 boundary
• 调试必看 Network → Request Payload：确认每个文件是否作为独立条目出现，而不是合并成一个 blob

最常被忽略的是：iOS 16.4 以下的静默失效和后端没配 upload.array() 却用了 req.file —— 这两个问题在测试环境里几乎不会暴露，上线后用户反馈“只能传一个”，排查起来特别耗时。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！