accept 属性仅控制文件选择对话框的默认筛选类型,不提供任何安全校验;用户仍可手动选择任意文件,上传必须依赖服务端校验真实类型、扩展名及内容。

accept 属性到底能限制什么
它只影响文件选择对话框的默认筛选类型,不提供任何安全校验。用户依然可以手动切换到“所有文件”并选中任意后缀名的文件,accept 不会阻止上传,也不会在前端拦截或报错。
常见误解是以为加了 accept=".pdf,.docx" 就能杜绝非 PDF/DOCX 文件上传——实际只是让系统弹窗时默认只显示匹配类型的文件,本质是 UI 提示级控制。
怎么写 accept 值才真正生效
必须按 MIME 类型或扩展名规范书写,不同浏览器对两种写法的支持程度不同:
- MIME 类型更可靠(如
accept="application/pdf"),但需查准对应类型,比如 Word 文档用application/vnd.openxmlformats-officedocument.wordprocessingml.document,不是简单的application/docx - 扩展名写法简单(如
accept=".pdf,.docx"),注意开头必须带点,多个用英文逗号分隔,不能有空格 - 混合写法允许(如
accept="image/*,.png,.jpg"),image/*匹配所有图片 MIME,后面再补具体扩展名可覆盖部分边缘情况
为什么选了 .xlsx 还能上传 .xls
accept=".xlsx" 对 Excel 97–2003 格式(.xls)完全无效,因为它是不同 MIME 类型:.xlsx 是 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,而 .xls 是 application/vnd.ms-excel。仅靠扩展名过滤会漏掉这类兼容格式。
立即学习“前端免费学习笔记(深入)”;
正确做法是同时声明两种 MIME:
input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
或者用扩展名组合:accept=".xlsx,.xls",但后者依赖浏览器对扩展名的解析一致性,某些旧版 Safari 可能忽略 .xls。
服务端必须做二次校验
前端 accept 仅作体验优化,所有文件上传都必须在服务端验证真实类型(如读取文件头、检查 magic number)、扩展名、大小、内容结构。例如用户把恶意脚本重命名为 report.pdf,accept=".pdf" 完全拦不住。
容易被忽略的是:即使前端 JS 用 File.type 判断,该字段由浏览器根据文件名或头部推测,不可信;Node.js 中用 file-type 库、Python 中用 python-magic 才算真正校验。
别省这一步——只要没在服务端校验,accept 就只是个友好提示。



















