最稳妥方案是隐藏原生并用自定义按钮；因其样式不可靠、兼容性差、无法动态显示文件信息，且accept仅作提示而非校验。
直接用 <input type="file"> 搭配 CSS 隐藏 + 自定义按钮是最稳妥、兼容性最好、语义最清晰的起点；所有“美化上传框”的需求，都应该从这个模式出发，而不是强行覆盖原生控件或依赖新伪元素。
为什么不能直接用 CSS 改 <input type="file"> 样式
原生 <input type="file"> 的样式在各浏览器中差异极大，且大部分关键部分（如按钮区域、文件名显示区）无法用标准 CSS 选择器精准控制。Chrome 98+ 支持 ::file-selector-button，但 Safari 对它的支持仍极弱，Firefox 基本不响应。强行写一堆 hack 样式，容易在下次浏览器更新后失效，还可能破坏可访问性（比如 screen reader 读不出按钮作用）。
更实际的问题是：用户选完文件后，原生控件默认只显示“已选择 1 个文件”，无法动态展示文件名、大小、类型，也没法加图标或状态反馈。
所以推荐做法是——隐藏它，但保留它：
-
display: none或opacity: 0; position: absolute隐藏原生 input，不移除 DOM - 用
<label></label>包裹它，并设置for="xxx"，点击 label 即触发文件选择 - 给 label 写完整样式（背景、圆角、hover、active 状态），甚至加 SVG 图标
- 监听
change事件，读取input.files并更新 label 文字或旁边的状态栏
accept 和前端校验的真实作用边界
accept 属性（如 accept="image/*,.pdf"）只影响文件选择对话框里的筛选视图，用户点开“所有文件”就能绕过。它不是安全机制，只是体验提示。
真正需要校验的地方在 JS 里，而且得做两层：
- 文件类型：读
file.type（MIME）和file.name.split('.').pop()（后缀），两者都检查，因为有些文件type是空字符串 - 文件大小：用
file.size > 5 * 1024 * 1024判断，超限就清空input.value = ''并提示，否则用户再次点击上传会复用旧值 - 注意：如果用了
multiple，input.files是FileList，不是数组，得先转成数组再遍历：Array.from(input.files)
上传逻辑必须用 FormData + fetch 或 XMLHttpRequest
表单直接提交（<form enctype="multipart/form-data"></form>）会导致页面刷新，SPA 场景下基本不可用。现代上传必须走 JS 请求。
关键细节常被忽略：
- 不要手动设置
Content-Type头。fetch在传FormData时会自动生成带boundary的 multipart 头，设错就导致后端收不到文件 - 字段名要和后端约定一致，比如后端 expect
request.files['avatar']，那就要formData.append('avatar', file) - 想传额外元数据（如用户 ID、分类），直接
formData.append('user_id', '123')，和文件同在一个请求里 - 大文件必须加进度监听：只有
XMLHttpRequest.upload.onprogress可用，fetch不提供原生 progress API
拖拽上传不是“高级功能”，而是必要补充
用户习惯已经变了：点选 → 拖拽 → 粘贴截图，是当前主流操作路径。只做点击上传，等于砍掉一半体验。
实现上不需要复杂库，核心就三件事：
- 给容器加
dragover和drop事件监听，并在dragover里调用event.preventDefault()（否则浏览器会打开文件） - 从
event.dataTransfer.files拿到文件列表，和input.files处理方式完全一样 - 视觉反馈很重要：拖入时加
border: 2px solid #007cba、背景色变浅，松手后立刻恢复，否则用户不知道是否成功
最后提醒一句：所有前端校验（类型、大小、数量）都只是防呆，不是防线。后端必须重新校验，且要限制 Nginx 的 client_max_body_size、Express 的 multer 限制、Flask 的 MAX_CONTENT_LENGTH —— 这些配置漏一个，上传就静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
