accept属性仅优化文件选择器界面，无法校验上传内容；必须结合javascript检查file.name后缀与file.type，并在服务端通过文件头（magic bytes）最终校验。
accept 属性只影响文件选择对话框，不校验实际上传内容
很多人以为给 <input type="file"> 加上 accept=".pdf,.docx" 就能阻止用户选错格式，其实它只是提示浏览器在打开文件选择器时过滤显示的文件类型（比如 macOS Finder 或 Windows 文件资源管理器里默认隐藏非匹配后缀的文件）。用户仍可手动切换“所有文件”并选中任意文件，accept 完全不参与后续校验。
真正有效的校验必须在 JavaScript 中读取 files[0].name 或更可靠的 files[0].type，再结合后缀检查。注意：files[0].type 是浏览器根据文件头或扩展名推测的 MIME 类型，可能为空或不准（比如 .xlsx 在某些系统返回空字符串），所以推荐双保险策略：
- 先检查
files[0].name的小写后缀是否在白名单内（如"pdf","docx"） - 再检查
files[0].type是否匹配常见 MIME（如"application/pdf","application/vnd.openxmlformats-officedocument.wordprocessingml.document"） - 若两者都缺失或不匹配，直接
event.preventDefault()并提示错误
用正则匹配文件名后缀比 split(".") 更安全
别用 filename.split(".").pop() 提取后缀——遇到 "my.archive.tar.gz" 会得到 "gz" 而非 "tar.gz"；更糟的是 "no-dot-filename" 会返回整个字符串，导致误判。
正确做法是用正则从末尾匹配点号 + 字母数字下划线组合：
const extMatch = filename.match(/\.([a-zA-Z0-9_]+)$/); const ext = extMatch ? extMatch[1].toLowerCase() : "";
然后查白名单：
const allowedExts = ["pdf", "docx", "xlsx", "jpg", "png"];
if (!allowedExts.includes(ext)) {
alert("仅允许上传 PDF、Word、Excel 或图片文件");
input.value = ""; // 清空 input，否则重复触发 change 事件
return;
}
服务端必须重新校验，前端校验纯属用户体验优化
前端任何 JS 校验都能被绕过：禁用 JS、改 DOM、用 curl 直传。所以 accept 和 JS 后缀检查，唯一作用是让用户早发现、早修正，减少无效请求和带宽浪费。
服务端收到文件后，必须做三件事：
- 检查原始文件名后缀（但不可全信）
- 读取文件前若干字节，用
file命令或库（如 Node.js 的file-type）识别真实 MIME - 对 Office 文档、PDF 等，进一步解析结构（例如用
pdf-parse确认是合法 PDF 流）
否则攻击者把恶意脚本改成 .pdf 后缀就能绕过前端，直抵后端解析逻辑。
Chrome 和 Safari 对 accept 的支持有差异，别依赖它做逻辑分支
accept 在 Chrome 中支持逗号分隔的扩展名（accept=".pdf,.xlsx"）和 MIME（accept="application/pdf"），但在 Safari（尤其是 iOS）中对复合 MIME（如 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet）支持不稳定，有时直接忽略整条规则。
如果你发现 Safari 下 accept 没生效，不是代码写错了，是浏览器行为本身不一致。此时更应聚焦于 JS 层统一处理，而不是补一堆 UA 判断或不同 accept 值。
一个容易被忽略的细节：iOS Safari 的文件选择器不支持多选 input type="file"，即使加了 multiple 属性，也只会允许单选 —— 这会影响你设计批量上传校验的逻辑边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
