最直接的方式是用 file.type 判断 MIME 类型,它返回浏览器解析的类型如 image/jpeg;但可能为空或不准,需在 choose 或 before 回调中读取,并配合 exts 和后端校验。
用 file.type 判断 MIME 类型最直接
浏览器在用户选择文件后,会为每个 file 对象提供 type 属性,它返回的是浏览器解析出的 mime 类型(如 image/jpeg、video/mp4)。这是判断图片/视频最轻量且可用的方式,但要注意它可能为空或不准(比如无扩展名的文件)。
实操建议:
- 必须在
choose或before回调里读取,不能在done里——那时文件已上传,File对象不可用了 - 不要只靠
file.type做最终判定,它可被伪造或缺失;应配合exts和后端校验 - 常见图片 MIME:以
image/开头(image/png、image/webp);视频 MIME:以video/开头(video/mp4、video/webm) - 示例判断逻辑:
choose: function(obj) { var files = obj.pushFile(); for (var i = 0; i < files.length; i++) { var f = files[i]; if (f.type.startsWith('image/')) { console.log('这是图片'); } else if (f.type.startsWith('video/')) { console.log('这是视频'); } } }
accept 和 acceptMime 控制选择框可见范围
如果你希望用户点开文件选择框时就只能看到图片或视频,而不是靠 JS 后续判断,就得靠初始化配置。Layui 的 accept 是粗粒度分类,acceptMime 才是精确过滤的关键。
实操建议:
- 要只显示图片:设
accept: 'images'(等价于acceptMime: 'image/*'),但注意这会忽略 WebP 等非标准类型,稳妥写法是accept: 'file', acceptMime: 'image/*' - 要只显示视频:必须用
accept: 'file', acceptMime: 'video/*';accept: 'video'虽然存在,但兼容性差,Safari 可能不识别 -
acceptMime值必须严格匹配标准 MIME,写成video/mp4比video/*更精准,但也更窄——用户有 .mov 文件就看不到 - 多个类型用逗号分隔:
acceptMime: 'image/jpeg, image/png, video/mp4',注意空格会被当字符,别写成'image/jpeg, video/mp4'
靠文件后缀(exts)判断不可靠但有时够用
exts 只做字符串后缀比对,比如 exts: 'jpg|png|mp4|avi',它不读文件内容,也不影响系统弹窗。所以它不能替代 file.type 或 acceptMime,但在简单场景下可作辅助提示。
常见陷阱:
- 用户把
hacker.exe改名为hacker.jpg,exts就完全失效 -
exts不区分大小写,但某些旧版 Layui 对大写后缀支持不好,统一用小写更稳 - 如果同时配了
accept: 'images',那exts里的mp4根本不会生效——因为accept已把视频类型从选择框里剔除了 - 想兼顾图片和视频,必须设
accept: 'file',再靠exts和acceptMime共同约束
before 回调里用 getChooseFiles() 做运行时拦截
当需要动态决定是否允许某次上传(比如根据用户角色切换允许类型),before 是唯一能拿到真实 File 数组并中断上传的地方。它比 choose 更晚触发,在点击“上传”按钮后、发请求前执行。
关键点:
-
before里调用this.getChooseFiles()才能拿到当前待上传的全部File对象(choose里是刚选中的,不一定最终上传) - 返回
false可阻止上传,配合layer.msg()提示用户 - 示例:
before: function() { var files = this.getChooseFiles(); for (var i = 0; i < files.length; i++) { var f = files[i]; if (!f.type || (!f.type.startsWith('image/') && !f.type.startsWith('video/'))) { layer.msg('仅支持图片或视频文件'); return false; } } } - 注意:
file.type在部分环境(如 iOS Safari)可能恒为空字符串,此时得 fallback 到后缀判断:f.name.split('.').pop().toLowerCase()
file.type + before 是最常用组合,而 acceptMime 配置只在首次渲染时有效——想换类型就得销毁重建实例,这点容易被忽略。


















