choose回调是唯一可靠时机,此时obj.files[0].size可准确获取文件大小(字节),需手动转KB并更新DOM显示;size配置项仅用于内置校验,不提供读取接口。
choose 回调里读取 obj.files[0].size 是唯一可靠时机
layui 的 upload 组件在用户点击选择文件后,只有 choose 回调能拿到原始 file 对象。此时 obj.files 是一个 filelist,单文件上传时直接取 obj.files[0] 就行,它的 size 属性单位是字节,除以 1024 并保留一位小数就是 kb 值。
别指望 before 或 done —— 那时候文件可能已发到服务端,或者还没触发读取逻辑;obj 在这些回调里不带 files 属性。
常见错误是写成 obj.file.size(不存在)或 obj.elem.files[0].size(DOM input 已被 upload 内部接管,值为空)。
显示 KB 值要手动更新 DOM,不能依赖组件自带 UI
layui upload 不提供“自动显示文件大小”的 UI 区域,你得自己找地方填。通常是在按钮旁加个 <span id="file-size"></span>,然后在 choose 里更新它:
choose: function(obj){
var file = obj.files[0];
if (!file) return;
var sizeKB = (file.size / 1024).toFixed(1);
document.getElementById('file-size').innerText = sizeKB + ' KB';
obj.upload(); // 放行上传
}
注意点:
- IE9 及以下不支持
File.size,但 layui 2.6+ 已基本放弃 IE9 支持,不用 fallback - 多文件场景下
obj.files是多个文件,需用Array.from(obj.files)转数组再遍历,否则无法用forEach - 如果用户取消选择或清空,
obj.files会变为空列表,记得同步清空显示区域
size 配置项和实际读取的 size 不是一回事
size: 2048 是 layui 内置的校验上限(单位 KB),但它只在内部触发提示,不暴露数值供你读取。你想显示“当前选中文件是 XX KB”,必须自己读 file.size,不能从配置项里拿。
也就是说:size 配置只管“拦不拦”,不管“显不显”。两者逻辑分离,混用会导致判断错乱——比如你设了 size: 1024,但用户选了个 900 KB 的文件,你仍要显示 900.0 KB,而不是“≤1024 KB”这种模糊文案。
顺带提醒:size 校验本身有兼容缺陷:IE10–IE11 下不生效(源码里写了 !(device.ie && device.ie ,但漏掉了中间版本),所以靠它做唯一防线不保险,前端显示 + 手动校验更稳。
不要在 preview 回调里读 size
有人把 obj.preview() 当成“文件加载完成”的钩子,想在里面读 file.size,这是错的。preview 只负责生成预览(如图片 base64),参数里的 file 是形参,不是原始 File 实例,且该回调可能被多次调用(比如拖拽多图),file 参数也不一定带 size。
正确姿势只有一处:在 choose 回调开头,用 obj.files[0] 拿到真实对象,立刻读、立刻显示、立刻校验。
最易被忽略的一点:如果用了 auto: false,又忘了在 choose 里调 obj.upload(),那文件就卡在“已选中但没上传”状态,用户以为功能坏了——而你显示的 KB 值却是对的,这种错位会让问题排查变得隐蔽。


















