acceptNum: 5 是最直接的写法,专限单次文件选择对话框最多勾选5个文件,需配合 multiple: true 使用,对拖拽上传无效;拖拽限制须在 choose 回调中手动校验并 return false。

acceptNum: 5 是最直接的写法
layui 2.8+ 支持 acceptNum 参数,它专为限制「单次文件选择对话框中最多能勾选几个文件」而设。只要用户点击按钮触发原生 <input type="file">,浏览器就会自动限制勾选数,无需手写逻辑。
-
acceptNum必须配合multiple: true使用,否则无效 - 它只作用于点击触发的选择弹窗,对拖拽上传不生效(拖入多少个都进得来)
- 老版本 layui(如 2.7 及更早)不支持该参数,会静默忽略
- 设置后,用户在弹窗里勾选第 6 个时,界面会禁用或置灰,行为由浏览器原生控制
number: 5 和 acceptNum: 5 的区别在哪
number 和 acceptNum 名字相似但职责不同:前者是 layui 内部用来分批上传的并发数控制(比如每批发 5 个请求),后者才是真正在选择阶段拦截文件数量的参数。很多人误以为 number: 5 能限制单次勾选数,结果发现没用——因为 number 不影响选择弹窗 UI,只影响后续上传调度。
-
number在multiple: false下被忽略 -
number对拖拽上传完全无感 -
acceptNum是纯前端选择层限制,不涉及上传流程 - 两者可共存,但语义不重叠:
acceptNum管“选”,number管“发”
拖拽上传时怎么补上限制
拖拽进来的文件绕过 acceptNum,所以必须在 choose 回调里统一校验。关键不是区分点击还是拖拽,而是所有入口都走同一套逻辑:
- 在
choose中调用obj.pushFile()获取本次传入的文件对象集合 - 用
Object.keys(files).length得到真实数量(别用files.length,会报错) - 如果数量 > 5,立刻
layer.msg('最多选 5 个')并return false - 这个判断对点击、拖拽、重复点击全部生效
为什么 return false 不能漏
return false 是硬性要求。Layui 的 choose 回调设计为“守门人”角色:只有返回 false 才会中断后续流程(包括预览渲染、加入上传队列、触发 before 等)。漏写这句,哪怕你弹了提示,文件照样进队列、照样能点上传。
- 不写
return false→ 提示有了,但文件已缓存,用户仍可上传 - 写了但写在条件外 → 判断失效,逻辑形同虚设
- 必须写在超限分支内,且是该分支最后一条执行语句
acceptNum 和 choose 中的手动校验不是二选一,而是互补。前者挡掉大部分点击场景,后者兜底拖拽和边界操作——两个都加,才算完整覆盖。


















