可通过input的accept属性限制上传pdf或word文档,应同时指定mime类型和扩展名以提高兼容性;该属性仅前端筛选,服务端必须二次校验文件真实类型。

可以通过 input 元素的 accept 属性指定允许上传的文件类型,限制用户只能选择 PDF 或 Word 文档(如 .pdf、.doc、.docx)。
正确设置 accept 属性值
使用逗号分隔的 MIME 类型或文件扩展名。推荐同时包含 MIME 类型和扩展名,提高兼容性:
-
application/pdf对应 PDF 文件 -
application/msword对应旧版.doc -
application/vnd.openxmlformats-officedocument.wordprocessingml.document对应.docx - 补充扩展名
.pdf,.doc,.docx,增强浏览器识别可靠性
HTML 示例代码
将以下代码嵌入页面即可:
注意事项与实际效果
accept 属性仅影响文件选择对话框的默认筛选行为,不提供安全校验:
- 主流浏览器(Chrome、Edge、Firefox)会默认隐藏不匹配类型的文件,但用户仍可通过“全部文件”选项绕过
- 必须在服务端再次验证文件真实类型(如检查 Magic Number 或文件头),不能仅依赖前端限制
- 避免只写扩展名(如
accept=".pdf,.docx"),部分浏览器对扩展名支持不一致;优先以 MIME 类型为主,扩展名作补充
可选:添加 multiple 和 required 提升体验
如需支持多文件上传或必填,可追加属性:
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











