accept属性仅优化前端文件选择体验，无法校验真实类型；必须结合javascript校验file.name扩展名与magic bytes，并在服务端以文件头为唯一依据进行二次校验。
accept 属性只过滤前端界面，不校验文件真实类型
浏览器的 accept 属性只是提示用户选择指定后缀或 MIME 类型的文件，并不会阻止用户手动修改文件名绕过限制，也不会读取文件头校验真实类型。比如把 hacked.exe 改名为 report.pdf，仍能通过 accept="application/pdf" 的选择。
实操建议：
- 始终在服务端二次校验（如用
file命令、MIME 库解析文件头） -
accept仅用于提升用户体验，不是安全防线 - 多个类型用英文逗号分隔，不要加空格：
accept="image/png,image/jpeg" - 支持通配符：
accept="image/*"匹配所有图片，accept=".docx,.xlsx"限定扩展名
正确写法：扩展名和 MIME 类型混用要小心
不同浏览器对 accept 的解析有差异。Chrome 对扩展名（如 .pdf）支持较好；Safari 更倾向识别标准 MIME 类型（如 application/pdf）；而 text/plain 可能被某些系统映射为所有纯文本类文件，不够精确。
实操建议：
- 优先列出具体 MIME 类型 + 对应扩展名，例如：
accept="application/pdf,.pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.docx" - 避免只写
accept="text/*"——它可能意外允许.js或.csv等非预期类型 - 不要依赖
accept="*"，部分浏览器会忽略或行为不一致
配合 JavaScript 做客户端初步校验更实用
光靠 accept 不够，但 JS 可在用户选完后立刻检查 input.files[0].type 和 input.files[0].name，给出即时反馈，减少无效提交。
实操建议：
-
file.type是浏览器根据扩展名或文件头推测的 MIME，不可信但可作快速过滤 - 务必同时检查
file.name后缀，防止用户删掉后缀后上传（如invoice而非invoice.pdf） - 简单校验示例：
const file = input.files[0];<br>const validTypes = ['application/pdf', 'image/png'];<br>const validExt = ['.pdf', '.png'];<br>if (!validTypes.includes(file.type) && !validExt.some(ext => file.name.toLowerCase().endsWith(ext))) {<br> alert('仅支持 PDF 和 PNG 文件');<br>}
服务端必须做二进制头校验，否则形同虚设
前端一切限制都可被绕过。真正可靠的判断来自读取文件前几个字节（magic bytes）。例如 PDF 文件开头是 %PDF（ASCII），PNG 是 \x89PNG\r\n\x1a\n。
实操建议：
- Node.js 可用
file-type库：await fileType.fromFile(path) - Python 推荐
python-magic（libmagic 绑定），不用依赖filename或Content-Type头 - 别只比对
Content-Type请求头——攻击者可任意伪造 - 上传临时目录后立即校验，校验失败立刻
unlink，避免恶意文件残留
accept + 客户端后缀/MIME 检查 + 服务端 magic bytes 校验，这三层缺一不可。最容易被忽略的是服务端不读文件内容、只信请求头或扩展名。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
