accept属性仅提供前端提示性过滤，无法真正限制文件类型，用户可通过“所有文件”、拖拽或删改html绕过；必须依赖前端change事件校验（扩展名+magic bytes）与后端二进制流解析（mime+安全重命名）双重保障。
file input 的 accept 属性能限制文件类型吗
能，但只是前端提示性限制，不是安全边界。浏览器会据此过滤文件选择对话框中的可见文件类型（比如只显示 .pdf 或 .jpg），但用户仍可通过“所有文件”选项绕过，或直接拖拽/脚本提交任意文件。accept 不影响实际上传行为，后端必须重新校验。
- 接受多种类型时用逗号分隔：
accept="image/png,image/jpeg,.pdf" - MIME 类型比扩展名更可靠（
image/*匹配所有图片，但不保证文件真实内容） -
accept="video/*"在部分 iOS 版本中支持不佳，建议补上具体类型如accept="video/mp4,video/webm" - 不要依赖
accept=".docx"—— 很多系统不识别该扩展名对应的 MIME，应写成accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
如何用 JavaScript 拦截不合规的文件上传
在 input[type="file"] 的 change 事件中读取 files 列表，检查每个 File 对象的 type 和 name，手动清空或报错：
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
const files = Array.from(e.target.files);
<p>const invalid = files.filter(f => !allowedTypes.includes(f.type));
if (invalid.length) {
alert(<code>不支持的文件类型：${invalid.map(f => f.name).join(', ')}</code>);
e.target.value = ''; // 清空输入框，防止后续 submit 提交
}
});</p>
-
File.type来自文件头或扩展名，不可信（比如把malware.exe改名为report.jpg，type可能为空或伪造） - 更稳妥的做法是结合
name后缀校验（用file.name.toLowerCase().endsWith('.png')），但依然可被绕过 - 若需强校验，必须配合后端 MIME 解析（如 Node.js 的
file-type库、Python 的python-magic）
服务端必须做哪些验证才能真正生效
前端所有限制都可被跳过，服务端至少要检查三项：
文件扩展名是否在白名单内（如只允许
.jpg、.pdf）实际二进制头（magic number）是否匹配宣称类型（例如
PDF文件开头应为%PDF，JPEG 为FF D8 FF）文件大小是否超出预期（避免 DoS 或存储溢出）
不要用
Content-Type请求头判断类型 —— 它由前端控制，极易伪造使用专用库解析文件头，不要只靠
path.extname()或字符串匹配上传后立即重命名文件（去掉原始
name），避免路径遍历或执行风险（如../../.htaccess）
常见错误：为什么设置了 accept 却还能选到 .exe
因为 accept 仅影响文件选择器的默认过滤视图，不是强制拦截。典型表现包括：
点击“所有文件”下拉菜单后，
.exe、.js等文件重新出现用户拖拽文件到页面，完全绕过
accept用
FormData手动构造并提交，无视任何 HTML 属性不要在
accept中写危险类型（如application/javascript），这反而会提高攻击者发现入口的几率如果业务只要图片，就别写
accept="<em>/</em>"，哪怕是为了“兼容性”——它等于没设移动端 WebView（尤其旧版 Android）对
accept支持极差，不能作为功能前提
真正的类型限制只发生在服务端解析文件头那一刻，其余都是用户体验优化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
