accept属性仅影响文件选择器界面过滤，无法强制限制上传；必须用标准mime类型（如image/jpeg），禁用空格和非标写法，且需前端js校验文件名与文件头、服务端二次校验真实类型。
accept 属性本身不强制限制，只影响文件选择器的界面过滤——用户仍能手动切换“所有文件”并选中任意类型。真正起作用的是你写的值是否符合浏览器识别规范，以及你有没有在后续环节补上校验。
accept 值必须用标准 MIME 类型，不是扩展名
浏览器靠 MIME 类型匹配系统注册的文件类型，而非文件后缀。写 .jpg 或 jpg 都不可靠，iOS Safari 会直接忽略。
-
image/jpeg—— 对应.jpg和.jpeg，别写image/jpg（非标准） -
image/png、image/gif、image/webp都是合法且广泛支持的 -
image/svg+xml是 SVG 的正确 MIME，.svg只作辅助提示，不能单独用 - 多个类型用英文逗号分隔，**不能有空格**：
image/jpeg,image/png,image/webp✅，image/jpeg, image/png❌（空格导致第二个值失效）
别混用通配符和具体类型
image/* 表示所有图片类型，但一旦混进具体类型如 image/*,image/avif，部分浏览器（尤其是旧版 Safari）可能降级为显示全部文件。
- 只要明确限定几种格式，就**只列具体 MIME**：
image/jpeg,image/png,image/webp - 如果业务允许所有图片，用
image/*即可，不用额外加.jpg,.png - 想兼顾兼容性？可以加扩展名辅助提示：
image/jpeg,image/png,.jpg,.jpeg,.png，但扩展名必须带点号，且仅作 fallback
前端 JS 必须做二次校验，否则形同虚设
用户能绕过 accept 的方式太多：拖放文件、改扩展名、用开发者工具删掉属性……提交前不检查，等于没设。
- 别只信
file.type—— 它由浏览器根据扩展名或首字节推测，可能为空或伪造 - 优先用
file.name.toLowerCase().endsWith('.jpg')做扩展名校验（注意大小写） - 关键业务建议读文件头（magic bytes）：
89 50 4E 47是 PNG，FF D8 FF是 JPEG，用FileReader或ArrayBuffer提取前几个字节判断 - 上传前检查
file.size，比如限制 ≤5MB：if (file.size > 5 * 1024 * 1024) { ... }
服务端校验不可省，且不能只看 extension 或 Content-Type
前端所有校验都可被跳过。服务端收到文件后，必须读取原始字节判断真实类型。
- Node.js 场景下，别用
path.extname()或req.headers['content-type']—— 攻击者能轻易伪造 - 用
file-type、mmmagic或原生fs.readSync读前几字节比对 magic number - 例如：PNG 文件必须以
89 50 4E 47 0D 0A 1A 0A开头，JPEG 是FF D8 FF开头，哪怕扩展名是.txt也得拒收 - 上传路径权限要隔离，执行权限关闭，避免上传
.php或.js后被解析执行
实际最易被忽略的点是：很多人写了 accept="image/jpeg,image/png" 就以为万事大吉，结果测试时用 .jpg 文件一切正常，上线后被人拖进一个伪造后缀的恶意二进制文件，直接打穿服务端校验逻辑。MIME 类型写对只是第一步，后面三道防线（前端扩展名 + 前端文件头 + 服务端文件头）缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
