accept="image/*"在iOS和安卓上表现不一致是因为各平台对HTML5规范实现不同：iOS Safari严格解析MIME类型，部分版本禁用相册入口；安卓WebView常忽略该属性，用户可选所有文件。
accept="image/*" 为什么在 iOS 和安卓上表现不一致
因为 accept 属性只是提示，不是过滤器。iOS Safari 对 MIME 类型解析极严，image/* 在部分版本中会直接禁用相册入口；而华为 EMUI、小米 MIUI 的 WebView 常完全忽略该属性，用户点“所有文件”就看到全部后缀。这不是 bug，是各平台对 HTML5 规范的实现差异。
图片格式白名单必须同时写 MIME + 扩展名
单靠 image/jpeg 或 .jpg 都会漏掉真实文件。浏览器行为分裂：Safari 依赖 MIME，安卓 WebView 更认扩展名，Windows 可能上报 image/pjpeg 而非标准 image/jpeg。
-
accept="image/png,image/jpeg,image/gif,image/webp,.png,.jpg,.jpeg,.gif,.webp"✅ 显式覆盖常见变体 -
accept="image/avif,.avif"✅ 若需支持 AVIF，单独加（注意 Chrome ≥93、Safari ≥16.4） -
accept="image/*,.jpg,.png"❌image/*已含所有图片类型，再混扩展名反而干扰 Safari 解析逻辑
前端 JS 必须校验 file.name，不能信 file.type
file.type 是浏览器根据文件名或系统注册表推测的，可为空、可伪造。把 hack.html 改名为 report.jpg，file.type 就可能变成 image/jpeg，但内容仍是 HTML。
- 用正则匹配扩展名更可靠：
file.name.toLowerCase().match(/\.(jpe?g|png|gif|webp)$/) - 多文件场景下必须遍历
event.target.files每一项，不能只看第一个 - 提示要具体：“已选 2 个不支持的文件（cover.psd, demo.tif）”，别只说“格式错误”
移动端上传图片最稳的组合写法
实测在 iOS 17+、Android Chrome 120+、华为鸿蒙 4.x 上通过率最高的配置：
立即学习“前端免费学习笔记（深入）”；
<input type="file" accept="image/png,image/jpeg,image/gif,image/webp,.png,.jpg,.jpeg,.gif,.webp" capture="environment">
其中 capture="environment" 强制调用后置摄像头（如需拍照），但注意：设了它之后，部分安卓机型会禁用图库选择——若需兼顾相册和拍照，得用两个 input 分开控制。
真正容易被忽略的是：无论 accept 写得多全，只要没在 change 事件里做 file.name 白名单校验，用户拖拽一个伪造的 .jpg 文件进来，前端就毫无察觉。而这一步，90% 的项目都漏掉了。
