跳转到主内容
极星编程网:以代码为星,赴技术山海!

layui upload上传前校验 layui如何在上传前判断文件大小

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 加载完成之后执行。

相关文章