accept属性仅过滤文件选择器显示类型，不校验文件内容；必须双写mime与扩展名（如"application/pdf,.pdf"），禁用空格，且后端须基于magic bytes二次校验。
accept 属性只过滤文件类型，不校验文件内容
浏览器用 accept 属性做的只是前端提示和系统级文件选择器过滤，它不会检查文件真实 MIME 类型或扩展名是否匹配。用户仍可通过“所有文件”选项绕过限制，或拖拽不符合类型的文件上传——所以后端必须做二次校验。
常见错误是以为写了 accept="image/*" 就能阻止 PDF 上传，结果测试时发现 PDF 还是能选中并提交。
-
accept值是逗号分隔的 MIME 类型或扩展名，比如accept="image/png,image/jpeg,.pdf" - MIME 类型优先于扩展名，但部分浏览器（如 Safari）对 MIME 支持较弱，建议同时写扩展名兜底
- 不要写空格：✅
accept="text/plain,.csv"，❌accept="text/plain, .csv"（空格会导致部分浏览器忽略后续项）
常见 MIME 类型和扩展名写法对照
不同浏览器对 MIME 类型识别差异大，尤其 Office 文件、压缩包这类没有统一标准类型的文件。直接写扩展名更可靠：
- 图片：
accept="image/*"或更精确地写accept="image/png,image/jpeg,image/gif" - PDF：
accept="application/pdf,.pdf"（仅写application/pdf在 Firefox 中可能失效） - Excel：
accept=".xlsx,.xls"（application/vnd.openxmlformats-officedocument.spreadsheetml.sheet兼容性差） - CSV：
accept=".csv,text/csv" - 音频：
accept="audio/*,.mp3,.wav"
配合 input[type="file"] 使用的注意事项
accept 必须和 <input type="file"> 一起用，单独加在其他元素上无效。多文件上传时，multiple 不影响 accept 的行为，但要注意某些旧 Android 浏览器不支持 accept + multiple 联合过滤。
- 正确写法：
<input type="file" accept=".pdf,.docx" multiple> - 错误写法：
<input type="file" accept="pdf,docx">（漏掉点号） - 移动端 iOS Safari 对
accept="image/*"会强制调起相机，若只想选图不拍照，得明确写accept="image/png,image/jpeg"
真正拦截非法文件得靠 JavaScript 检查 file 对象
accept 是弱约束，要提前拦截，必须监听 change 事件，读取 files[0].type 和 files[0].name 做判断：
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const validTypes = ['image/png', 'image/jpeg'];
const validExt = ['.png', '.jpg', '.jpeg'];
const ext = '.' + file.name.split('.').pop().toLowerCase();
if (!validTypes.includes(file.type) && !validExt.includes(ext)) {
alert('仅支持 PNG/JPEG 格式');
e.target.value = ''; // 清空输入框
}
});
注意：file.type 可被伪造，且某些浏览器（如 Chrome）对本地文件返回空字符串，所以扩展名检查不能省。
复杂点在于：同一扩展名可能对应多个 MIME 类型（比如 .csv 可能是 text/csv 或 application/vnd.ms-excel），而用户上传时浏览器未必按你预期返回类型。最稳的方式是后端用文件头（magic bytes）判断真实类型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
