应使用标准 MIME 类型如 image/jpeg,image/png 设置 accept 属性，并配合 JS 校验文件后缀或类型；避免仅依赖 accept，移动端需注意兼容性，accept="image/*" 更稳妥。

想让 H5 页面的 <input type="file"> 只允许用户选择特定图片格式（比如只选 JPG 和 PNG），关键在 正确使用 accept 属性 + 后续 JS 校验。仅靠 HTML 限制不保险，但能显著提升体验和首道过滤效果。

用标准 MIME 类型写 accept 值

浏览器识别 accept 主要依赖官方注册的 MIME 类型，不是文件扩展名。推荐写法：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• image/jpeg —— 对应 .jpg 和 .jpeg（image/jpg 是错误写法）
• image/png —— 对应 .png
• image/gif、image/webp、image/avif 同理
• 多个类型用英文逗号分隔，不加空格：
  <input type="file" accept="image/jpeg,image/png,image/webp">

移动端相机调用必须注意兼容性

在微信、QQ、iOS Safari 等环境中，如果 accept 写得太具体（如只写 image/jpeg,image/png），部分浏览器会直接禁用“拍照”入口，只能进相册——这是真实存在的兼容性陷阱。

• 安全做法：保持 accept="image/*"，确保相机可用
• 再用 JS 检查实际上传文件的类型或后缀：
  const ext = file.name.split('.').pop().toLowerCase();
if (!['jpg', 'jpeg', 'png', 'webp'].includes(ext)) { /* 提示错误 */ }
• 更可靠的方式是读取文件头（Blob 的前几个字节），但简单项目用后缀+file.type已够用

别踩这些常见坑

• ❌ accept=".jpg,.png" —— 缺少 MIME 类型，iOS Safari 可能完全忽略
• ❌ accept="jpg,png" —— 不是合法值，无效
• ❌ 单独依赖 accept 防非法文件 —— 用户可轻松绕过，服务端必须校验文件内容（魔数 + MIME + 扩展名）
• ✅ 若只需单图，不加 multiple；若需预览，配合 FileReader 或 URL.createObjectURL()

补充：要不要加扩展名提示？

可以加，但只是辅助增强感知，不能替代 MIME：

• 写成：accept="image/jpeg,image/png,.jpg,.jpeg,.png"
• Chrome/Edge 会同时识别 MIME 和扩展名，但 iOS Safari 仍主要看 MIME
• 切记：image/* 和扩展名混用没问题；但 image/* 和具体 MIME 混用（如 image/*,image/jpeg）没必要，且可能引发歧义