accept属性仅控制文件选择器默认过滤，无法真正校验文件类型；必须用JavaScript二次校验：优先检查file.type.startsWith('image/')，再fallback到小写后缀正则匹配，同时校验size并清空input.value，高安全场景需读取文件头魔数。
仅靠 accept 属性无法真正验证文件类型，它只影响系统文件选择器的默认过滤行为，用户仍可手动切换为“所有文件”并选中任意格式。必须用 JavaScript 做二次校验，否则前端验证形同虚设。
为什么 accept 属性不能当校验用
accept="image/*" 的作用只是告诉浏览器：“在弹出的本地文件选择窗口里，默认只显示图片类文件”。但它不阻止用户点击下拉菜单改成“所有文件(*.*)”，然后选一个 fake.png（实际是压缩包）上传。IE9 及更早版本甚至完全忽略该属性。某些安卓 WebView 中 accept 完全失效，file.type 恒为空。
常见错误现象包括：
- 用户上传了
report.docx但重命名为report.jpg，file.type仍可能返回image/jpeg -
file.type返回空字符串或application/octet-stream（尤其在移动端或伪造文件头时） - 后缀名含多个点（如
my.photo.png），用file.name.substring(file.name.lastIndexOf('.'))提取会出错
如何用 JavaScript 正确校验文件类型
优先检查 file.type，再 fallback 到后缀名正则匹配，两者结合才可靠。不要只依赖其中一种。
立即学习“前端免费学习笔记（深入）”；
- 先判断
file.type && file.type.startsWith('image/')—— 最轻量、最常用 - 若
file.type为空（常见于安卓 WebView 或伪造文件），退而提取后缀：file.name.toLowerCase().match(/\.[a-z0-9]+$/) - 用完整正则测试后缀，避免
file.name.endsWith('.jpg')这类写法（不区分大小写、不处理.JPG或.jpeg.txt）
示例函数：
function isValidImage(file) {
if (file.type && file.type.startsWith('image/')) return true;
const ext = file.name.toLowerCase().match(/\.[a-z0-9]+$/);
return ext && /\.(jpg|jpeg|png|gif|bmp|webp)$/.test(ext[0]);
}别忘了 file.size 校验和 input.value 清空
大小校验必须放在 change 事件回调里做，且失败后必须执行 event.target.value = ''，否则用户选同一个超大文件两次，第二次不会触发 change 事件——因为 DOM 值没变。
- 立即读取
event.target.files[0]，不要缓存到外部变量（否则可能拿到旧文件） - 大小比较用字节：如
file.size > 5 * 1024 * 1024，避免浮点除法带来的精度问题 - 清空操作要写在所有校验分支之后，包括
type和size都失败的情况
高安全场景需读取文件头魔数
当业务对文件真实性要求极高（如医疗影像、法律文书上传），仅靠 file.type 和后缀已不够。必须用 FileReader 读取前几个字节，比对真实魔数（magic number）。
例如 PNG 文件头是 89 50 4E 47，JPEG 是 FF D8 FF。这个步骤会引入异步开销，且部分低版本浏览器不支持 FileReader，所以只在必要时启用。它无法被绕过，是目前前端最硬的校验手段。
