multiple属性仅支持单次多选，无法限制总文件数；需结合JavaScript校验：监听change事件、截取前5个文件、去重防重复、实时UI提示，并服务端二次校验。
在HTML5中，multiple 属性本身只控制单次文件选择框是否允许选多个文件，**它不能直接限制用户总共可选的文件数量**。要实现“批量上传 + 总数限制”，需结合 multiple 与 JavaScript 手动校验和干预。
1. 正确使用 multiple 属性启用多选
只需在 <input type="file"> 中添加 multiple，浏览器即允许按住 Ctrl（或 Cmd）点击多个文件，或直接拖入多个文件：
2. 用 JavaScript 限制总选择数（例如最多 5 个）
监听 change 事件，在用户选择后检查 files.length，若超限则截断或提示：
- 获取
event.target.files（返回FileList对象，只读） - 不能直接修改
files，但可用Array.from(files).slice(0, 5)提取前 5 个 - 推荐做法：清空 input 值再重新设置（通过
input.value = ''），再用临时<input type="file">模拟重置并触发新选择 - 更实用方案：不重置 input，而是收集所有已选文件到一个数组，每次新增时合并、去重、截断，并更新 UI 显示当前已选列表
3. 防止重复添加同一文件（可选增强）
用户可能多次打开选择框并重复选中相同文件，可通过比对 file.name + file.size + file.lastModified 判断是否已存在：
立即学习“前端免费学习笔记（深入）”；
- 为每个新选文件生成简易唯一标识（如
`${file.name}-${file.size}-${file.lastModified}`） - 维护一个 Set 或 Map 存储已接受的标识
- 过滤掉已存在的文件，避免重复计入总数
4. 提交前校验与友好提示
仅前端限制不够可靠，提交时仍需再次校验；同时应给用户明确反馈：
- 实时显示“已选 3/5 个文件”，并在超限时禁用上传按钮
- 用
alert或页面内提示说明“最多只能上传 5 个文件，请重新选择” - 服务端必须做二次校验——因为 JS 可被绕过
