accept管浏览器文件选择框的可见文件类型,exts仅校验上传前的文件名后缀;accept需配合acceptMime(如application/pdf)精确控制,exts仅作前端提示且易被绕过。
accept 和 exts 到底谁管什么?
accept 是浏览器文件选择框的“门禁”,它决定你点开选择窗口时能看到哪些文件;exts 是上传前的“第二道筛子”,只校验文件名后缀,不看内容,也不影响系统弹窗显示。
常见错误现象:设了 exts: 'pdf' 却仍能选中 .txt 文件——因为 accept 还是默认的 'images' 或没配,浏览器根本没过滤。
使用场景:
- 只想让用户看到 PDF:必须配
accept: 'file'+acceptMime: 'application/pdf' - 允许上传 PDF 和 Excel:用
acceptMime: 'application/pdf, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',再加exts: 'pdf|xlsx'
注意:accept 值不能自定义,只能是 images / file / video / audio 四个之一。想筛特定类型,acceptMime 才是关键。
acceptMime 写错 MIME 就白配
acceptMime 不是随便拼的,浏览器严格按标准匹配。写成 file/pdf 或 pdf 都无效,必须是 application/pdf。
常见错误现象:配置了 acceptMime: 'image/webp',但在 Safari 里 WebP 文件不出现——因为 Safari 旧版本只认 image/x-webp。
常用 MIME 类型(务必抄准):
- ZIP:
application/zip - RAR:
application/x-rar-compressed - PNG:
image/png - WebP:建议同时写
image/webp, image/x-webp - Excel(.xlsx):
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
兼容性影响:Chrome 对 MIME 支持最全,Firefox 次之,Safari 最保守。线上项目务必在目标浏览器里实测弹窗是否真过滤。
exts 校验只是“表面功夫”,别当真
exts 只检查文件名后缀,用户把 123.exe 改成 123.jpg 就能绕过。它不读文件头、不解析二进制,纯字符串比对。
所以:
- 不要单独依赖
exts做安全控制 - 后端必须重新校验真实 MIME 类型和文件头(magic number)
- 多后缀用竖线分隔,不能用空格或逗号:
exts: 'jpg|jpeg|png'✅,exts: 'jpg, jpeg'❌
性能无影响,但逻辑上容易让人误以为“限制住了”。实际它只起提示+前端友好拦截作用。
需要更严的控制?用 before + getChooseFiles()
before 回调是唯一能真正读取文件元信息的地方。你可以在这里读 file.type(浏览器识别的 MIME)、file.size、甚至用 FileReader 读前几字节做 magic 校验。
示例:阻止非图片类文件(哪怕后缀是 .png,但 type 是 text/plain):
before: function(obj) {
var files = obj.getChooseFiles();
if (files.length && !files[0].type.startsWith('image/')) {
layer.msg('请选择图片文件', {icon: 2});
return false;
}
}注意:file.type 由浏览器提供,可能为空(比如拖拽上传或低版本 IE),所以不能只信它,要和 exts + 后端双重配合。
真正复杂的类型控制,从来不是单靠一个参数搞定的。MIME 写错、exts 拼错、accept 用错、before 忘加——四个地方任一出问题,用户就可能传上来不该传的东西。










