讲师中心 微信公众号
AI工具推荐 视频效率加速

layui文件上传怎么在上传前校验文件大小和格式

胖枫姑娘_4035

胖枫姑娘_4035

发布时间:2026-10-07 06:52:01

|

273人浏览过

|

来源于php中文网

原创

size、accept、exts、acceptMime 必须同时配置才有效:size 控制单文件体积(字节),accept 影响原生选择框初始筛选,exts 做后缀字符串匹配,acceptMime 真正控制 input 的 accept 属性;choose 回调中才能获取真实 file.size,before 中 files 为 undefined;多文件需用 Array.from 遍历并逐个校验;before 支持 Promise 用于异步校验;前端限制可被绕过,服务端必须校验文件头、真实 MIME、后缀及大小。

layui文件上传怎么在上传前校验文件大小和格式

size 和 accept/exts/acceptMime 必须同时配齐才有效

只设 size: 2048,用户仍能选中超限文件——它只在底层过滤,不阻止选择框弹出;只设 accept: "image",只是让系统文件对话框默认筛选图片类,但用户点“所有文件”就能绕过;只写 exts: "jpg|png",后缀校验发生在 choose 阶段,此前无法拦截。三者缺一不可:size 控单文件 KB 级体积,accept 影响原生选择框初始分类,exts 做文件名后缀字符串匹配,acceptMime 才真正控制 <input type="file"> 的 accept 属性。推荐组合:accept: "file"(显式放开选择范围)+ exts: "jpg|png|gif" + acceptMime: "image/jpeg,image/png,image/gif"。

choose 回调里才能拿到真实 file.size,before 里没有 files

很多人误在 before 回调里读 obj.file.size 或 obj.elem.files[0].size,结果是 undefined 或 0。Layui 在 before 阶段已剥离原始 FileList,只保留上传上下文。真正能读到字节大小的唯一时机是 choose 回调里的 obj.files[0].size(单文件)或遍历 obj.files(多文件)。注意单位是字节,换算 KB 要除以 1024,不是 1000。

  • 超限判断示例:if (file.size > 5 * 1024 * 1024) { layer.msg('文件不能超过 5MB'); return; }
  • 多文件需逐个检查:Array.from(obj.files).forEach(file => { ... }),别用 for-in 遍历 obj.files(它是 FileList,非数组)
  • 校验失败时调用 obj.clear() 清空已选,避免用户误以为还能传

before 回调支持 Promise,适合做异步权限或服务端预检

如果校验逻辑依赖后端(比如检查用户剩余上传配额、文件名是否已存在),before 是唯一支持异步的钩子。返回 Promise 即可:resolve 继续上传,reject 中断并触发 error 回调。注意不要在 before 里尝试读文件内容或计算 MD5——此时已无 files,必须把这类操作提前到 choose 阶段做完并缓存结果。

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

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

下载
  • 正确写法:before: function(obj) { return $.get('/api/upload/check', { size: obj.files[0].size }).then(res => { if (!res.ok) throw '配额不足'; }); }
  • 错误写法:before: function(obj) { console.log(obj.files); }(此处 obj.files 为 undefined)
  • reject 后不会触发 done,但会进 error,记得配好该回调处理提示

前端限制只是第一道筛子,服务端校验不可省

size 和 exts 全部可被浏览器开发者工具绕过:改 DOM 的 accept 属性、删掉 onchange 监听、甚至直接 fetch 提交。所以服务端必须重新校验文件头(Magic Number)、真实 MIME、完整后缀、实际字节数。尤其注意:exts 不区分大小写,但服务端解析时若未转小写,.JPG 可能被拒;acceptMime 里写的 image/jpg 是错的,标准是 image/jpeg,服务端按 RFC 校验会失败。

最容易被忽略的是:拖拽上传时 acceptMime 完全失效(浏览器不支持),此时全靠 exts 和 choose 里的手动校验撑住——别假设用户只会点按钮选文件。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2303

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

4963

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6050

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5558

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

783

2024.05.22

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

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

3811

2023.10.23

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

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

6448

2024.03.06

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

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

774

2025.12.30

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

100

2026.09.30

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.7万人学习

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

共89课时 | 10.9万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn