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