必须加 multiple 属性，否则浏览器原生只允许选一个文件；常见失效原因包括：form 缺 enctype="multipart/form-data"、name 未用数组格式、method 非 post、ios safari 16.3 及更早版本静默忽略 multiple、filelist 需转数组才能遍历、不可用 value 获取文件名、file.path 恒为 undefined、json.stringify(filelist) 得空对象、formdata 中 append key 应重复使用同名、勿手动设 content-type，调试需查 network 的 request payload。
必须加 multiple 属性，否则浏览器原生只允许选一个文件——这不是 JS 能补救的限制，是 HTML 规范级行为。
为什么加了 multiple 还是只能选一个文件
大概率漏了以下至少一项硬性条件：
-
enctype="multipart/form-data"没写在<form></form>标签上——没有它，文件数据根本不会发出去 -
name没用数组形式，比如写了name="files"而不是name="files[]"，导致 PHP 只保留最后一个文件信息 - 表单
method不是POST——GET无法携带文件 - iOS Safari 16.3 及更早版本会静默忽略
multiple，input.files.length始终为 1，且无任何报错提示。检测方式：navigator.userAgent.includes('iPhone') && /OS [1-9]\d?_[0-3]/.test(navigator.userAgent)
input.files 是 FileList，不是数组
直接调 .forEach() 或 .map() 会报 TypeError: not a function，因为它是只读类数组对象。
- 安全转成真数组：用
Array.from(input.files)或[...input.files] - 别用
input.value获取文件名——它只返回第一个文件的伪造路径（如C:\fakepath\photo.jpg） - 每个
File对象有name、size、type、lastModified，但file.path在所有现代浏览器中都是undefined - 遍历时别直接
JSON.stringify(input.files)——结果是空对象，因为FileList不可序列化
用 FormData 上传多个文件时 append 的 key 怎么写
后端能否收到全部文件，取决于你往 FormData 里怎么填 key：
- ✅ 正确：对每个文件都用相同
key多次append，例如formData.append('files', file)—— 后端需启用「同名多值」解析（Express 用upload.array('files')，PHP 遍历$_FILES['files']['name']数组） - ❌ 错误：只
append一次，或把整个FileList当作一个值塞进去（formData.append('files', input.files)），行为不一致，Chrome 可能凑合，Firefox 直接丢 - 别手动设置
Content-Type请求头——浏览器会自动设为multipart/form-data并生成正确boundary - 调试时务必看 Network 面板的
Request Payload，确认每个文件是否作为独立条目出现，而不是合并成一个 blob
最易被忽略的是 iOS 16.4 以下 Safari 的静默失效问题：没报错、没警告、multiple 形同虚设。检测后必须提示用户升级或换浏览器，JS 无法绕过这个系统级限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
