layui upload 上传前须在 choose 回调中通过 obj.files[0] 获取 File 对象并读取 size(IE 兼容需 fallback 到 fileSize),校验超限需调用 obj.reset() 并提示,不可依赖 before 回调或 return false。
layui upload 上传前怎么拿到文件大小
layui 的 upload 组件本身不直接暴露原始 file 对象,但你可以在 choose 回调里拿到——这是唯一能合法读取文件大小的时机。错过这个回调,就只能等 before(此时文件已开始上传,校验晚了)。
常见错误是误以为 before 回调里的 obj 有文件信息,其实它只提供 obj.upload() 和 obj.preview(),没 file 属性。
-
choose回调参数obj的obj.files是一个FileList,每个元素都是标准File实例,有size、name、type - 单文件上传时
obj.files[0]就是目标文件;多文件需遍历校验 - 校验失败必须手动调用
obj.reset()清空已选文件,否则界面仍显示“已选择”,但后续点击上传会静默失败
校验超限后如何阻止上传并提示用户
不能靠 return false 或 throw,layui 不识别这些。必须在 choose 里做判断 + 主动重置 + 弹出提示,否则用户无感知,还以为上传成功了。
示例逻辑:
layui.use('upload', function(){
var upload = layui.upload;
upload.render({
elem: '#uploadBtn',
url: '/api/upload',
choose: function(obj){
var file = obj.files[0];
if (!file) return;
if (file.size > 5 * 1024 * 1024) { // 5MB
layer.msg('文件不能大于 5MB');
obj.reset(); // 关键:清空选择
return;
}
obj.upload(); // 满足条件才放行
}
});
});- 不要在
before里校验大小——此时文件流已触发,服务端可能已接收部分数据 - 提示建议用
layer.msg,别用alert,阻塞体验差且无法定制样式 - 如果用了
auto: false,记得只在通过校验后才调用obj.upload(),否则不会自动上传
多文件上传时 size 校验的坑
多文件场景下,obj.files 是全部已选文件,但用户可能一次选 10 个,其中 2 个超限——你不能简单 reset() 全部,得过滤后只上传合规文件。
- 遍历
obj.files,用Array.from(obj.files)转成数组再filter - 对每个合规文件调用
obj.upload({data: {filename: f.name}})单独上传(注意:upload方法支持传参覆盖配置) - 别试图用
obj.files = filteredFiles—— 这个属性只读,赋值无效 - 服务端也要做好多文件并发上传的幂等和限流,前端校验只是第一道防线
IE10/11 下 File.size 返回 undefined 怎么办
IE10–11 不支持 File.size,但支持 File.fileSize(非标准属性)。不兼容处理会导致校验失效,用户上传超大文件失败才报错。
- 兼容写法:
var size = file.size || file.fileSize || 0 - 更稳妥的做法是加一层类型判断:
typeof file.size === 'number',避免undefined参与比较 - 如果项目已放弃 IE,这步可跳过;但只要还有 IE 用户,就必须加兜底
- 注意:IE 下
FileList是伪数组,Array.from不支持,得用传统 for 循环
真正容易被忽略的是:校验逻辑写在 choose 里,但很多人把整个 upload 初始化包在 layui.use 外面,导致 IE 下 file 对象不可用——确保初始化代码在 layui 加载完成之后执行。









