multiple属性本身不能限制多选总数，仅控制是否允许一次选多个；实现最多选5个需javascript监听change事件截取前5个文件并去重，且服务端必须二次校验。
HTML 的 multiple 属性本身**不能限制多选总数**，它只控制“是否允许一次选多个”，不是“最多选几个”。想实现“最多选 5 个”，必须用 JavaScript 干预，且服务端必须二次校验。
为什么multiple加了还是能选100个？
因为 multiple 是开关，不是计数器。只要浏览器支持（Chrome/Firefox/Edge/macOS Safari 都行），用户就能 Ctrl/Cmd 多选、框选、拖拽任意数量文件——哪怕你只想要 3 个。
-
multiple必须和type="file"一起写才生效：<input type="file" multiple> - 写了
multiple="false"或multiple=""也没用，只要属性存在，就等于 true - iOS Safari 在 16.4 之前基本无视
multiple，点开仍是单选，且无报错提示
怎么用 JavaScript 截断到最多 5 个文件？
监听 change 事件，拿到 input.files 后手动截取前 5 个。注意：input.files 是只读的 FileList，不能直接赋值，得靠重建 input 或维护外部数组。
- 最简做法：每次选择后取前 5 个，丢弃超量部分
const files = Array.from(input.files).slice(0, 5); - 别直接清空
input.value = ''再重设——这会触发新对话框，打断用户流程 - 推荐维护一个全局数组
selectedFiles = []，每次新增时合并、去重、截断，再更新 UI 显示 “已选 3/5” - 去重靠简易指纹：
${file.name}-${file.size}-${file.lastModified}，存进Set过滤重复文件
上传时 FormData 怎么避免只收到最后一个文件？
常见错误是循环里反复 append('file', file)，结果后端只拿到最后一个。关键在 key 名一致 + 后端按多值解析。
- ✅ 正确：
formData.append('files', file)对每个文件都调用一次（key 始终是files） - ❌ 错误：
formData.append('file', file)→ 多数后端覆盖为单个；或formData.append('files', input.files)→ 行为不一致，Firefox 可能丢文件 - 调试看 Network → Request Payload，确认每个文件是否独立列出，而不是合并成一个 blob
- 后端必须适配：Express 用
upload.array('files')，PHP 遍历$_FILES['files']['name']数组，不能只取$_FILES['files']['name']字符串
服务端校验为什么不能省？
前端限制纯属“友好提示”，JS 可被禁用、绕过或篡改。用户改几行代码就能发 100 个文件过来。
- PHP 示例：检查
count($_FILES['files']['name']) > 5，直接返回 400 - Node.js Express：在 multer 中配置
limits: { files: 5 } - Nginx 层也可加
client_max_body_size防大体积攻击，但不防数量 - 真正容易被忽略的是：文件名安全（如路径遍历）、类型白名单（别信
file.type）、临时文件清理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
