HTML表单如何限制上传文件类型

HTML表单中的accept属性仅能提供前端提示性过滤，无法真正阻止非法文件上传——用户轻松切换“所有文件”即可绕过，而前端JS检查（如file.type或文件大小）也因浏览器推测不准、扩展名可伪造等缺陷不可信；真正安全的防线在于后端必须通过文件头魔数（magic bytes）校验真实类型，而非依赖扩展名或MIME字段，同时务必设置enctype="multipart/form-data"确保文件正确传输——所有前端限制只是优化用户体验的“友好提示”，唯有服务端的魔数校验才是守护服务器安全的关键底线。

HTML <input type="file"> 的 accept 属性真能拦住非法文件？

不能。它只是提示浏览器过滤文件选择对话框里的可见类型，用户仍可手动切换“所有文件”绕过，后端必须校验。

常见错误现象：accept=".pdf,.docx" 写成 accept="pdf,docx"（缺点）或 accept="application/pdf" 但没覆盖 Windows 上常见 MIME 误报（比如 .xlsx 被报成 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet）。

• accept 值优先用 MIME 类型（如 application/pdf），其次用扩展名（如 .pdf），二者可并存：accept=".pdf,application/pdf"
• 多个类型用英文逗号分隔，不要空格：accept=".jpg,.jpeg,.png,image/jpeg,image/png"
• 移动端 Safari 对 MIME 支持弱，建议同时写扩展名兜底

前端 JS 拦截上传前的文件类型和大小

靠 accept 不够，得用 JS 读 input.files[0].type 和 .size 做二次检查，但要注意 .type 是浏览器根据扩展名/魔数推测的，不可信。

使用场景：提交前即时反馈，避免无效请求；但仅作体验优化，绝不能替代后端校验。

• input.files[0].name 取扩展名更可靠（如 file.name.split('.').pop().toLowerCase()）
• 检查大小用 file.size > 5 * 1024 * 1024（5MB），注意单位是字节
• 别只依赖 file.type 判断图片——type 为空或为 "" 很常见，尤其拖拽上传时

后端必须校验文件真实类型，不是扩展名

用户改后缀名（如把 evil.exe 改成 safe.jpg）就能骗过前端所有检查。真正安全的做法是读文件头（magic bytes）。

性能影响：服务端解析魔数开销极小，但若用完整 MIME 库（如 Python 的 python-magic）需注意初始化成本；兼容性上，Node.js 的 file-type 包比原生 fs.readFileSync + 手动比对更稳。

• PHP 用 finfo_file($finfo, $tmpFile)，别用 $_FILES['file']['type']
• Node.js 避免只看 req.file.originalname，用 file-type 读 buffer 前 12 字节
• Java Spring 中禁用 MultipartFile.getContentType()，改用 Tika 或 Files.probeContentType()

form 表单提交时，enctype 忘设会直接失败

如果