HTML5的accept属性仅作客户端提示，需用标准MIME类型如image/jpeg、image/png等逗号分隔设置，不可依赖扩展名或通配符，服务端必须校验文件内容。
HTML5 中的 accept 属性可以提示浏览器过滤可选文件类型，但它只是**客户端提示**，不能替代服务端校验。要让文件上传控件（<input type="file">）仅显示或优先推荐特定图片格式，需正确设置 accept 值。
使用标准 MIME 类型指定常见图片格式
最可靠的方式是使用官方注册的 MIME 类型，例如：
-
image/jpeg（对应.jpg、.jpeg） -
image/png（对应.png） -
image/gif（对应.gif） -
image/webp（对应.webp，现代浏览器支持良好） -
image/avif（对应.avif，较新，需注意兼容性）
多个类型用逗号分隔，不加空格：
也可配合文件扩展名进一步提示（非强制）
部分浏览器（如 Chrome、Edge）会同时识别扩展名写法，增强用户感知：
注意：image/* 表示所有图片类型，若只想限定几种，就不要混用通配符；扩展名写法仅作辅助，不可单独依赖（例如 .jpg 不如 image/jpeg 准确，因某些系统可能将 .jpg 关联为其他 MIME 类型）。
避免常见错误写法
- ❌
accept=".jpg,.png"—— 缺少 MIME 类型，兼容性差，iOS Safari 可能完全忽略 - ❌
accept="jpg,png"—— 不是合法值，无效 - ❌
accept="image/jpg"——image/jpg非标准 MIME 类型，应使用image/jpeg - ❌ 仅靠
accept防止非法文件上传 —— 用户可轻松绕过（如修改 HTML 或拖入不合规文件），服务端必须重新校验文件头和实际内容
补充：限制单图 & 启用图片预览（可选增强体验）
若只允许上传一张图片，加上 multiple 属性并控制逻辑即可；结合 <img> 和 JavaScript 还可实现本地预览：
监听 change 事件，用 FileReader 读取并显示 base64 数据，提升交互反馈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
