accept属性仅作提示无法强制限制，前端需结合文件扩展名和大小校验，后端必须通过文件头解析等手段严格验证，且表单method、enctype及input name属性缺一不可。
accept 属性只能提示，不能强制限制
HTML 的 accept 属性根本做不到“强制限制”——它只是告诉浏览器“建议过滤哪些类型”，用户在文件选择框里点一下“所有文件”，就能选任意后缀的文件。iOS Safari 尤其明显：accept="image/jpeg,image/png" 在它上面基本无效；accept="image/*" 能唤起相册，但照样能选 HEIC 或 WebP。别把它当安全机制，只当体验优化手段。
前端校验必须用 file.name 后缀 + size 判断
用户选完文件后，event.target.files[0] 的 type 字段经常为空（尤其 Windows 下双击选的文件），不能依赖。可靠做法是：
- 用
file.name.toLowerCase().endsWith('.jpg')或正则/\.(jpe?g|png|gif|webp)$/i检查扩展名 - 同时校验大小：
file.size > 5 * 1024 * 1024（5MB）就清空input.value并提示 - 若需更严谨，可读取前 4 字节做魔数判断（如 PNG 是
89 50 4E 47），但多数业务场景扩展名已够用
后端必须重新校验文件头和内容
前端所有检查都可被绕过：禁用 JS、改后缀、抓包重发……后端不校验等于没限。关键动作包括：
- 不信任
Content-Type请求头或文件扩展名，用库解析真实文件头（如 Python 的python-magic，Node.js 的file-type） - 拒绝
image/bmp、image/vnd.microsoft.icon等非预期但 MIME 匹配的类型 - 清理文件名：去掉路径（
../../）、特殊字符，重命名成随机字符串 + 安全后缀 - Nginx 或应用层设上传体大小上限（如
client_max_body_size 10M）
form 标签配置错误会导致整个限制失效
即使前后端都写了校验，如果表单基础结构错，文件根本传不到后端：
-
method必须是post -
enctype必须设为multipart/form-data（缺了它，文件字段会变空） -
input[type="file"]必须有name属性，否则后端收不到该字段 - 移动端要调用摄像头，可加
capture="environment"，但此时accept会被忽略，拍出格式由设备决定
真正卡住图片格式的地方不在 HTML，而在服务端对字节流的解析逻辑。前端做的每一步，都是为了减少无效请求、提升用户反馈速度，而不是代替后端做决定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
