0

0

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

月夜之吻

月夜之吻

发布时间:2026-03-18 12:20:39

|

870人浏览过

|

来源于php中文网

原创

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 回调参数 objobj.files 是一个 FileList,每个元素都是标准 File 实例,有 sizenametype
  • 单文件上传时 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() 全部,得过滤后只上传合规文件。

Jamboss
Jamboss

Jamboss是一款简单的AI音乐生成App,可以一键生成歌曲。

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

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

6625

2023.07.31

网页undefined是什么意思
网页undefined是什么意思

网页undefined是指页面出现了未知错误的意思,提示undefined一般是在开发网站的时候定义不正确或是转换不正确,或是找不到定义才会提示undefined未定义这个错误。想了解更多的相关内容,可以阅读本专题下面的文章。

3356

2024.08.14

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

1721

2025.12.25

JavaScript中的typeof用法
JavaScript中的typeof用法

在JavaScript中,typeof是一个用来确定给定变量的数据类型的操作符。可以用来确定一个变量是字符串、数字、布尔值、函数、对象或undefined的数据类型。更多关于typeof用法相关文章,详情请看本专题下面的文章,php中文网欢迎大家前来学习。

770

2023.11.23

alert怎么实现换行
alert怎么实现换行

alert通过使用br标签来实现换行。更多关于alert相关的问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

501

2023.11.07

Python WebSocket实时通信与异步服务开发实践
Python WebSocket实时通信与异步服务开发实践

本专题聚焦 Python 在实时通信场景中的开发实践,系统讲解 WebSocket 协议原理、长连接管理、消息推送机制以及异步服务架构设计。内容包括客户端与服务端通信实现、连接稳定性优化、消息队列集成及高并发处理策略。通过完整案例,帮助开发者构建高效稳定的实时通信系统,适用于聊天应用、实时数据推送等场景。

2

2026.03.18

Java Spring Security权限控制与认证机制实战
Java Spring Security权限控制与认证机制实战

本专题围绕 Java 后端安全体系建设展开,重点讲解 Spring Security 在权限控制与认证机制中的应用实践。内容涵盖用户认证流程、权限模型设计、JWT 鉴权方案、OAuth2 集成以及接口安全防护策略。通过实际项目案例,帮助开发者构建安全可靠的后端认证体系,提升系统安全性与可扩展能力。

0

2026.03.18

抖漫入口地址合集
抖漫入口地址合集

本专题整合了抖漫入口地址相关合集,阅读专题下面的文章了解更多详细地址。

110

2026.03.17

多环境下的 Nginx 安装、结构与运维实战
多环境下的 Nginx 安装、结构与运维实战

本专题聚焦多环境下Nginx实战,详解开发、测试及生产环境的差异化安装策略与目录结构规划。深入剖析配置模块化设计、灰度发布流程及跨环境同步机制。结合监控告警、故障排查与自动化运维工具,提供全链路管理方案,助力团队构建灵活、高可用的Nginx服务体系,从容应对复杂业务场景挑战。

13

2026.03.17

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号