accept属性仅优化前端文件选择体验，非安全机制；须用标准mime类型（如image/jpeg）或带点扩展名（如.pdf）逗号分隔无空格，并配合服务端基于文件头的mime校验。
accept 属性怎么写才真正起作用
accept 不是开关，它只是给浏览器一个提示，告诉它“优先展示哪些文件”。用户点开选择框后，仍可手动切到“所有文件”并选任意类型。所以它的价值在于体验优化，而不是安全拦截。
正确写法必须用标准 MIME 类型，比如 image/jpeg、application/pdf，不能写成 jpg 或 image/jpg（后者根本不存在）。多个类型用英文逗号分隔，中间不加空格：
<input type="file" accept="image/jpeg,image/png,application/pdf">
移动端 Safari 对 MIME 类型支持弱，建议同时补上扩展名兜底：accept="image/*,.pdf,.docx"。注意扩展名必须带点，.pdf 可以，pdf 无效。
常见错误：
-
accept="jpg,png"—— 缺少.和 MIME，完全失效 -
accept="image/jpg"—— 非标准类型，Chrome 会忽略 -
accept="image/*,.pdf"中间加了空格 —— 浏览器可能只认前半部分
为什么不能只靠 accept 检查文件类型
因为 input.files[0].type 是浏览器根据扩展名或魔数推测的，不可信。拖拽上传时经常为空字符串；用户改个后缀名（比如把 malware.exe 改成 safe.jpg），type 就变成 image/jpeg 了。
更可靠的前端校验方式是：
- 取扩展名：
file.name.split('.').pop().toLowerCase()，比file.type稳定 - 检查大小：
file.size > 5 * 1024 * 1024（5MB），单位是字节 - 监听
change事件，在提交前做判断，失败时调用event.preventDefault()
示例逻辑：
input.addEventListener('change', e => {<br> const file = e.target.files[0];<br> const ext = file.name.split('.').pop().toLowerCase();<br> if (!['jpg', 'jpeg', 'png'].includes(ext)) {<br> alert('仅支持 JPG/PNG 格式');<br> e.target.value = ''; // 清空 input，避免残留非法文件<br> }<br>});
form 表单漏设 enctype 就根本收不到文件
哪怕 accept 写得再准、JS 校验再严，如果 <form></form> 没加 enctype="multipart/form-data"，后端永远拿不到文件字段。这是最常被忽略的硬性前提。
现象是：req.file 或 $_FILES['xxx'] 为空，但控制台没报错，容易误以为是 JS 问题。
必须显式声明：
Node.js + multer 下典型错误信息：req.file is undefined；PHP 下 $_FILES 数组为空；Spring Boot 中 MultipartFile 为 null。
后端校验为什么不能省
前端所有限制都可被绕过：禁用 JS、直接发 POST 请求、伪造请求头……唯一可靠的方式是读文件头（magic bytes）判断真实类型。
关键点：
- 别信
$_FILES['file']['type']（PHP）、req.file.mimetype（Express）、MultipartFile.getContentType()（Spring）——这些全是客户端传来的，可伪造 - PHP 用
finfo_file($finfo, $tmpFile)；Node.js 推荐file-type包读 buffer 前 12 字节；Java 用Files.probeContentType()或 Apache Tika - 文件大小也要在服务端二次检查，防止前端绕过 JS 限制
真正安全的边界只有一条：用户上传的二进制流到达后端那一刻，必须重新解析内容，而不是信任任何元信息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
