html file input 的 multiple 属性不支持限制文件数量，需通过 change 事件监听并用 javascript 截断；移动端 safari 兼容性差，且服务端必须二次校验。
file input 的 multiple 属性本身不支持限制个数
HTML 原生 <input type="file"> 的 multiple 属性只有两个值：true（允许多选）或省略（单选），它**没有内置机制控制最大选择数量**。浏览器看到 multiple 就放开多选，但不会拦着用户选 100 个文件——这是设计使然，不是 bug。
用 change 事件 + JavaScript 手动截断
实际项目中必须靠 JS 拦截并修正 files 列表。关键点在于：不能只靠 input.files.length 判断，因为用户可能拖入超量文件、或通过 Ctrl+Click 多次添加，导致 files 是只读的 FileList，无法直接修改。
- 监听
change事件（不是click或input） - 拿到
event.target.files后，转成数组再切片：Array.from(event.target.files).slice(0, 3) - 用
DataTransfer构造新列表并赋回input.files—— 但注意：现代浏览器（Chrome/Firefox/Edge）**不允许直接写input.files**，所以只能视觉上“清空再重设”，或用replaceChildren()配合隐藏 input + 模拟触发 - 更稳妥的做法是：校验后若超限，提示用户并手动重置
input.value = ''，避免脏状态
示例逻辑：
const input = document.querySelector('input[type="file"][multiple]');
input.addEventListener('change', (e) => {
const max = 3;
if (e.target.files.length > max) {
alert(`最多只能选择 ${max} 个文件`);
e.target.value = ''; // 清空输入框，重置 files 列表
}
});
移动端 Safari 对 multiple 支持有限
iOS 16.4 之前，Safari 完全不支持 multiple，点了就只让选一个；即使现在支持了，也存在两个坑：
- 用户长按照片选择时，系统相册界面仍只允许单选（除非用「选择多张」入口）
-
change事件在某些 iOS 版本里可能触发两次，导致重复校验或重置失败 - 建议加防抖 + 显式检查
e.target.files.length是否为 0 再执行清空逻辑
服务端必须二次校验，前端限制只是体验优化
任何前端限制都可被绕过：禁用 JS、手动构造 FormData、抓包重发……所以：
- 后端收到文件数组后，必须用业务逻辑判断
request.files.length > 3并返回明确错误（如 HTTP 400 +{"error": "最多上传3个文件"}） - 不要依赖前端传来的
count字段，直接数真实上传的文件对象 - 如果用的是 Express +
multer，可通过limits.files配置全局上限，但它控制的是整个请求的文件总数，不是单个 input
真正难的不是怎么写那几行 JS，而是得同时守住前端交互、移动端兼容、服务端防御三道线——漏掉任意一环，用户都能突破限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
