accept属性仅前端提示，不校验文件真实类型；必须结合文件名后缀与后端magic bytes双重校验，且multiple上传时无法自动过滤混合类型。
accept 属性本身不校验 MIME 类型，只告诉浏览器“优先显示哪些文件”，它不能阻止用户上传 .exe、.html 或重命名过的恶意文件。真正起作用的永远是后端对文件头（magic bytes）和真实 MIME 的解析。
accept 值怎么写才被主流浏览器识别
浏览器对 accept 的支持差异大：Chrome 和 Edge 对扩展名（如 .pdf）较友好；Safari（尤其 iOS）更依赖标准 MIME 类型，且对通配符支持滞后。必须用逗号分隔、无空格、带引号：
-
accept="image/jpeg,image/png,.jpg,.png"✅ 双保险，覆盖多数场景 -
accept="application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.pdf,.xlsx"✅ Excel 文件在 Safari 中常因只写.xlsx而不可见 -
accept="text/plain,.txt,.md"✅ 避免text/*匹配到text/html -
accept="image/*"⚠️ 简便但有风险：会放行image/svg+xml（可含脚本）、image/psd等非预期类型
为什么写了 accept="application/pdf" 还能选到 .pdf 文件但上传失败
常见现象不是 accept 失效，而是后端校验失败——因为用户可能把 report.html 改名为 report.pdf，浏览器读取文件头后给 File.type 赋值为 text/html，但 accept 并不检查这个值。此时前端没拦截，后端发现真实 MIME 不匹配就拒收。
-
File.type是浏览器推测的，可能为空、不准或被伪造 - 不要在 JS 中只靠
file.type === 'application/pdf'判断 - 更可靠的是结合
file.name.toLowerCase().endsWith('.pdf')+ 服务端魔数校验
multiple 上传时 accept 不会自动过滤混合类型
设了 multiple 和 accept=".jpg,.png"，用户仍可一次勾选 a.jpg、b.psd、c.svg —— 浏览器全放进 event.target.files 列表，accept 完全不干预。
- 必须在
change事件里遍历每个File对象 - 推荐逻辑：
const ext = file.name.split('.').pop().toLowerCase(); if (!['jpg', 'jpeg', 'png'].includes(ext)) { /* 提示并剔除 */ } - 别依赖
file.type，iOS/Safari 下它常为空字符串
最易被忽略的一点：即使你把 accept、前端 JS 校验、后端 MIME 检查全做对了，如果上传目录有执行权限，或静态资源走同域未隔离，一个伪装成图片的 .php 文件仍可能被服务器直接解析执行——accept 连这层防护的边都沾不上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
