accept属性仅优化文件选择界面，无法真正限制上传；必须前端js校验扩展名与magic bytes、后端基于文件头魔数识别真实类型并重命名存储，才能保障安全。
accept 属性根本不能限制上传，它只让浏览器在弹出的选择框里默认过滤显示——用户点“所有文件”、拖拽、改 DOM 或用 curl 都能绕过。真要控制类型，必须前端 JS 二次校验 + 后端魔数识别双保险。
accept 值怎么写才在多数浏览器生效
单写 MIME 或单写扩展名都容易失效：iOS Safari 依赖 MIME，安卓 WebView 常忽略 MIME 只认扩展名，Windows 上同一文件可能报 image/jpeg 或 image/pjpeg。必须 MIME + 扩展名双写，逗号分隔且**不能有空格**：
-
accept="image/jpeg,image/png,.jpg,.jpeg,.png"✅ 覆盖 JPG/PNG 主流变体 -
accept="application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.pdf,.docx"✅ Word 文档最稳组合 -
accept="text/csv,.csv"✅ CSV 必须带text/csv，否则部分 Safari 直接忽略 -
accept="image/*,.jpg,.png"✅ 通配符兜底，再补关键扩展名防漏
以下写法基本无效：accept=".jpg,.png"（iOS Safari 忽略）、accept="jpg,png"（非法值）、accept="image/jpg"（非标准 MIME）、accept="image/png , .jpg"（逗号后空格 → Safari 解析失败）。
为什么 file.type 不能用来判断文件类型
file.type 是浏览器推测值，不是文件真实内容的反映。它可能为空（尤其 Windows 下双击选择的文件），也可能被轻易伪造：把 malware.exe 改名为 report.jpg，file.type 就可能变成 image/jpeg，但实际仍是可执行文件。
- 优先用
file.name.toLowerCase().endsWith('.pdf')或正则file.name.match(/\.(pdf|docx)$/i) - 关键业务必须加 magic bytes 校验：用
FileReader读前 4 字节，PDF 是%PDF（十六进制25 50 44 46），PNG 是\x89PNG（89 50 4E 47） - 设了
multiple后，event.target.files是FileList，必须遍历每一项，不能只检查第一个
后端校验为什么不能只看请求头或扩展名
前端传来的 Content-Type 请求头、PHP 的 $_FILES['file']['type']、Node.js 的 req.file.mimetype 全部可被伪造，毫无可信度。服务端收到的文件，必须读取二进制流前若干字节，用魔数识别真实类型：
- Node.js 推荐用
file-type库解析 buffer 前 12 字节 - Python 用
python-magic，注意初始化成本 - PHP 用
finfo_file($finfo, $tmpFile)，别碰$_FILES里的 type 字段 - 确认 MIME 类型与允许列表一致（如
.jpg必须对应image/jpeg）后，再重命名保存，剥离原始扩展名
最容易被忽略的是表单漏设 enctype="multipart/form-data"，会导致后端收不到任何文件字段，排查时容易卡在 JS 逻辑里——这个属性不是可选项，是 multipart 上传的硬性前提。
真正拦不住恶意文件的地方，从来不是 accept，而是你是否在服务端读了那几个字节的魔数，以及是否把原始扩展名扔进了垃圾桶。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
