multiple属性仅启用多选功能，不控制数量、不上传文件、不展示列表；限制总数需javascript校验files.length并截断，且服务端必须二次校验。
multiple 属性本身不上传文件，也不展示列表，更不限制数量——它只是打开浏览器多选文件的开关。没它，永远只能选一个；加了它，后续所有逻辑（读取、校验、预览、上传）都得你手动写。
为什么加了 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 并避免常见报错？
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
限制最多选 5 个文件，为什么不能靠 HTML 属性实现？
multiple 本身不提供数量限制能力。所谓“限制”，必须靠 JavaScript 实时干预：
- 监听
change事件，用Array.from(input.files).slice(0, 5)截取前 5 个（不能直接改input.files，它是只读的） - 维护一个独立数组管理已选文件，每次新增时合并、去重（用
file.name + file.size + file.lastModified生成简易唯一标识）、再截断 - 实时显示 “已选
3/5个文件”，超限时禁用上传按钮，并给明确提示 - 服务端必须二次校验——前端 JS 可被绕过，仅靠它不安全
真正容易被忽略的是：iOS 低版本和部分 Android 浏览器（如旧版 Samsung Internet）对 multiple 支持不稳定，有时只允许单选；大文件批量预览时，FileReader.readAsDataURL() 容易触发内存溢出，应优先走分块上传或跳过预览直接提交。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
