layui文件上传怎么在前端限制用户只能选择PDF或Word

轻丽吖_8045

轻丽吖_8045

2026-10-02

924人浏览

原创

acceptmime 必须与 accept="file" 配对才生效,仅设 acceptmime 无效;多 mime 用“, ”分隔;exts 为小写竖线分隔后缀,仅校验文件名;choose 回调中需手动校验并 return false 阻断非法文件;size 单位为 kb;服务端必须二次校验文件头和真实 mime。

layui文件上传怎么在前端限制用户只能选择pdf或word

acceptMime 必须配对 accept 才能过滤文件选择框

只写 acceptMime: "application/pdf" 没用,浏览器不会过滤。Layui 要求 accept 先设为 "file"(不能是 "images" 或空),再由 acceptMime 精确指定 MIME 类型。Windows/macOS 文件选择器才可能只显示 PDF 和 Word 文件。

常见错误:写成 acceptMime: "pdf" 或 "file/pdf" → 完全无效;必须用标准值:"application/pdf"、"application/vnd.openxmlformats-officedocument.wordprocessingml.document"(.docx)或 "application/msword"(.doc)。

  • accept: "file" 是前提,否则 acceptMime 被忽略
  • 多个 MIME 用英文逗号+空格分隔:"application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
  • Safari 对 .docx MIME 支持不稳定,建议同时加 application/msword 兜底

exts 是上传前最后一道字符串校验,大小写敏感且不含点

exts 不影响弹窗,只在用户点完“打开”后检查文件名后缀。它不读内容、不防伪装,但能快速拦截明显错误(比如选了 .exe 却声称是 PDF)。

正确写法:exts: "pdf|docx|doc" —— 竖线分隔、小写、无点。写成 "PDF,DOCX" 或 "pdf, docx" 都会失效。

Adwords
Adwords

营销文案助手。标题公式(100个)、正文写作、AIDA框架、痛点挖掘、客户证言、落地页文案。Copywriting with 100 headline formulas, body copy, AIDA framework, pain points, testimonials.

下载
  • 用户把 hack.exe 改名为 report.pdf,exts 会放行;后端必须用文件头(magic number)二次校验
  • 若需拒绝非真实 PDF 的 .pdf 文件,得进 before 回调读 file.type 或用 FileReader 读前 4 字节
  • exts 和 acceptMime 应保持语义一致,避免配置矛盾(比如 acceptMime 允许 PDF,exts 却没写 pdf)

choose 回调里 return false 才能真正阻止非法文件进入流程

即使 acceptMime 和 exts 都配了,Layui 默认仍会把不符合的文件放进 obj.files(尤其拖拽场景)。必须在 choose 中手动判断并中断。

示例逻辑:

choose: function(obj) {
  const files = obj.getChooseFiles();
  const validExts = ['pdf', 'docx', 'doc'];
  for (let file of files) {
    const ext = file.name.split('.').pop().toLowerCase();
    if (!validExts.includes(ext)) {
      layer.msg('仅支持 PDF、Word(.doc/.docx)文件', {icon: 2});
      return false;
    }
  }
  obj.upload(); // 确认合法后才触发上传
}
  • 别依赖 obj.files.length 判断——IE9- 下它是 undefined,应统一用 obj.getChooseFiles()
  • 拖拽上传时,acceptMime 完全不生效,exts 和 choose 校验是唯一防线
  • 如果用了 multiple: true,要遍历每个 file 单独校验,一个不符就整批拒掉

size 单位是 KB,不是 MB,设错会导致限制过严

PDF 和 Word 文件体积波动大,合同类 PDF 常超 10MB。size 参数单位固定为 KB,写成 size: 10 表示最多 10KB,一张扫描图都传不过去。

  • 推荐值:size: 51200(50MB)保 PDF 扫描件,size: 10240(10MB)适合纯文字 Word
  • 超过 size 时,choose 回调里 obj.getChooseFiles() 返回空数组,且直接进 error 回调,不触发 before
  • size 只限单个文件,多文件上传时不会累加校验总大小

前端限制只是体验层筛子,acceptMime 受浏览器实现掣肘,exts 和 size 可被绕过,真正的校验必须落在服务端——读文件头、比 magic number、验证真实 MIME、检查内容是否可解析。

前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!

相关文章

极轻PDF
极轻PDF

专业的在线PDF工具,支持PDF编辑、转换、合并、压缩等多种功能,操作简单,处理高效,满足日常办公与学习中的PDF处理需求。

下载

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

相关专题

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

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

2023.08.11

2223

5

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

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

2023.10.09

4743

6

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

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

2024.03.19

5870

13

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

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

2024.03.22

5338

10

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

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

2024.05.22

763

5

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

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

2023.10.23

3691

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

6168

6

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

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

2025.12.30

774

19

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

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

2025.12.30

654

12

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程