Layui上传组件upload如何实现在选择文件后立即显示文件的大小KB

小晨酱_1234

小晨酱_1234

2026-05-14

556人浏览

原创

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,不能从配置项里拿。

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

也就是说: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 值却是对的,这种错位会让问题排查变得隐蔽。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

2023.10.23

4091

6

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

2024.03.06

7008

6

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

2025.12.30

814

19

html5新老标签汇总
html5新老标签汇总

HTML5在2026年持续优化网页语义化与交互体验,不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签,还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

2025.12.30

694

12

html5空格代码怎么写
html5空格代码怎么写

在HTML5中,空格不能直接通过键盘空格键实现,需使用特定代码。本合集详解常用空格写法:&nbsp;(不间断空格)、&ensp;(半个中文空格)、&emsp;(一个中文空格)及CSS的white-space属性等方法,帮助开发者精准控制页面排版,避免因空格失效导致布局错乱,适用于新手入门与实战参考。

2025.12.30

373

8

html5怎么做网站教程
html5怎么做网站教程

想从零开始学做网站?这份《HTML5怎么做网站教程》合集专为新手打造!涵盖HTML5基础语法、页面结构搭建、表单与多媒体嵌入、响应式布局及与CSS3/JavaScript协同开发等核心内容。无需编程基础,手把手教你用纯HTML5创建美观、兼容、移动端友好的现代网页。附实战案例+代码模板,快速上手,轻松迈出Web开发第一步!

2025.12.31

521

12

HTML5建模教程
HTML5建模教程

想快速掌握HTML5模板搭建?本合集汇集实用HTML5建模教程,从零基础入门到实战开发全覆盖!内容涵盖响应式布局、语义化标签、Canvas绘图、表单验证及移动端适配等核心技能,提供可直接复用的模板结构与代码示例。无需复杂配置,助你高效构建现代网页,轻松上手前端开发!

2025.12.31

338

7

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2025.12.31

581

20

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

2025.12.31

538

20

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.9万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.1万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习