multiple属性仅启用多选功能而非限制数量，ios safari 16.4前不支持，android 4.4 webview静默降级；accept值影响ios多选可用性；需用change事件校验文件数、去重并截取，filelist只读不可赋值；formdata须统一key名如'files'并遍历append；checkbox数量限制应在click阶段拦截并委托事件；服务端校验为唯一可靠手段。
input[type="file"] 的 multiple 属性不控制数量上限
加了 multiple 之后用户仍能选 100 个文件，是因为它只是个布尔开关——存在即允许多选，不存在即强制单选，和“最多几个”完全无关。浏览器根本不识别 max-files、multiple="5" 或 multiple="false" 这类写法，写了也当没写。
iOS Safari 在 16.4 之前压根不支持 multiple，点了还是单选；Android 4.4 WebView 也会静默降级。这些环境里，光靠 HTML 属性根本拦不住超量选择。
-
accept值会影响 iOS 多选是否可用：写成accept="image/*"才可能调起支持多选的照片 App；写成accept=".pdf"或空着，大概率退化为单文件上传 - 必须监听
change事件，在input.files.length超限时主动干预，不能依赖属性 - 服务端二次校验是硬性要求，前端 JS 可被绕过或禁用
用 change 事件截取前 N 个文件并去重
用户选完后，input.files 是只读的 FileList，不能直接赋值覆盖。常见错误是清空 input.value = '' 再试图重建，这会触发新文件对话框，打断操作流。
推荐做法是维护一个外部数组（比如 selectedFiles = []），每次 change 触发时合并新文件、按简易指纹去重、再截取前 N 个：
const newFiles = Array.from(input.files);
const fingerprint = file => `${file.name}-${file.size}-${file.lastModified}`;
const uniqueFiles = [...new Map(newFiles.map(f => [fingerprint(f), f])).values()];
selectedFiles = [...selectedFiles, ...uniqueFiles].slice(0, 5);
- 指纹拼接用
file.name+file.size+file.lastModified足够应对绝大多数重复场景，比只比 name 更稳 - 别用
Set直接存File对象——它们不是可枚举键，去重无效 - UI 上同步显示 “已选
selectedFiles.length/5”，让用户有明确预期
FormData 上传时 key 名必须一致且后端支持多值
常见 bug 是循环里反复调用 formData.append('file', file)，结果后端只收到最后一个。这是因为多数后端框架把同名字段当作单值覆盖处理。
正确方式是统一用同一个 key（如 files），让后端按数组解析：
const formData = new FormData();
selectedFiles.forEach(file => formData.append('files', file));
- 调试时务必打开 Network → Request Payload，确认每个文件是否独立列出（能看到多个
files条目） - 如果只看到一个 blob 或一堆二进制乱码，说明前端 append 方式错了，或者后端没配置好 multipart 解析
- Firefox 对
formData.append('files', input.files)行为不一致，可能丢文件，必须遍历单个 append
checkbox 组限制选中数量的可靠拦截点
只在 change 里设 event.target.checked = false 不够——Safari 下会出现“先打勾再闪退”，安卓 WebView 可能状态错乱。最稳的是在 click 阶段同时做两件事：
checkbox.addEventListener('click', e => {
const checkedCount = [...document.querySelectorAll('input[name="group"]:checked')].length;
if (checkedCount >= 3 && !e.target.checked) return; // 允许取消腾位置
if (checkedCount >= 3) {
e.preventDefault();
e.target.checked = false;
}
});
- 动态插入的 checkbox（如权限树、搜索结果）必须用事件委托，监听父容器的
click，再用e.target.matches('input[type="checkbox"][data-limit]')过滤 - 统计已选项一定要读
el.checked（JS 属性），别用:checked（CSS 伪类），后者在 click 瞬间还没更新 - 服务端必须重新统计提交上来的 checkbox 值，前端限制纯属体验层，DevTools 一行代码就能绕过
click 阶段），越容易避免状态抖动；但真正可信的判断点永远在服务端——所有客户端截断、提示、UI 更新，都只是降低用户犯错成本的辅助动作。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
