HTML多文件上传核心是multiple属性，需与type="file"共存、form设enctype="multipart/form-data"、后端按多值解析（如Express用upload.array）、FormData用同名key多次append、iOS低版本需降级、大文件须分批处理。
HTML 多文件上传不是靠 JavaScript 实现的，核心就一个属性：multiple——没它，永远只能选一个；加了它，原生就支持 Ctrl/Cmd 多选、框选、拖拽。
为什么加了 multiple 还是只能传一个文件
常见错误是只写了 <input type="file"> 却漏掉 multiple，或者写了但没配对关键条件：
-
multiple必须和type="file"同时存在，单独写multiple属性无效 - 表单
<form>必须设置enctype="multipart/form-data"，否则文件数据根本不会发出去 - 后端接收逻辑必须按「多值」处理，比如 Express 的
upload.array('files')，不是upload.single()；PHP 要遍历$_FILES['files']['name']数组，不能只取$_FILES['files']['name']字符串 -
name属性建议带[]，例如name="files[]"，否则某些后端框架（如 PHP）会把多个同名字段覆盖，只剩最后一个
input.files 和 value 完全不是一回事
value 只返回第一个文件的伪造路径（如 C:\fakepath\photo.jpg），对多文件毫无意义；真正要读的是 input.files，它是一个 FileList 对象：
- 不能直接
JSON.stringify(input.files)——结果是空对象，因为FileList不可序列化 - 遍历时用
for (let i = 0; i < input.files.length; i++)或转成数组：Array.from(input.files) - 每个
file是File实例，有name、size、type、lastModified等元数据，可用于校验 - 别在用户选完 50 个文件后才提示“已选
input.files.length个”，应实时显示，避免误判卡死
用 FormData 上传多个文件时 key 名怎么写
后端能否收到全部文件，取决于你往 FormData 里怎么 append：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
formData.append('files', file1); formData.append('files', file2)—— 大多数后端（如 Express 默认配置）会把同名 key 当作单值，只保留最后一次 - ✅ 正确写法：用相同 key 名多次
append，例如formData.append('files', file1); formData.append('files', file2)，后端需启用「同名多值」解析（Express 用req.files['files']，不是req.file） - 不要手动设置
Content-Type请求头，让浏览器自动设为multipart/form-data并生成正确的boundary - 调试时务必打开 Network 面板，看 Request Payload 里是否每个文件都作为独立条目出现，而不是合并成一个 blob
iOS 16.4 以下和内存限制是真问题
看似只是加个属性，实际部署时容易踩两个隐形坑：
- iOS 16.4 以下系统不支持
multiple，用户点开只能选一个——没 fallback 就等于功能不可用，得检测并提示或降级为多次单选 - 一次性用
FileReader读几十个大文件，很容易触发浏览器 OOM（Out of Memory），尤其在低端安卓机上；正确做法是分批处理，或改用流式上传（如fetch+ReadableStream） -
accept属性只过滤类型，不限制数量，别指望靠它防用户狂点 200 个文件——前端校验必须自己做input.files.length <= 10这类逻辑
最常被忽略的其实是后端解析方式：前端传得再对，后端用错中间件或没展开数组，结果就是「明明选了 10 个，后端只拿到 1 个」。检查 req.files 结构比反复调前端更有效。
