因为这是html原生语义行为，label包裹input type="file"时，浏览器强制将label点击透传至内部input，即使其display: none仍可触发文件选择器，前提是保持嵌套关系或for/id正确匹配。
为什么用 label 包裹 input type="file" 能触发选择框
因为这是 HTML 原生语义行为，不是 JS 模拟或 hack。只要 input 在 DOM 中且未被 disabled，哪怕设了 display: none，它依然能响应 label 的点击透传——浏览器规范强制保证这点。
关键前提是：必须是嵌套关系（<label><input type="file"></label>），或用 for 属性严格匹配 id。前者更简洁、不易出错；后者若 ID 写错或重复，点击就完全失效。
- 不要给
input加pointer-events: none，这会切断事件转发链 - 避免用
visibility: hidden+height: 0等组合，某些旧版 Safari 对这类隐藏方式支持不稳 - 如果用了框架（如 Vue/React），确保
input没被条件渲染移除（比如v-if切换为 false），否则 DOM 里根本不存在，label 就无处可透传
multiple 和 accept 属性在自定义按钮中是否有效
完全有效，且不需要额外 JS 支持。这些是 input type="file" 自身的原生属性，和 label 是否存在、是否隐藏无关。
常见误操作是把 multiple 写在 label 上，或者只加在 JS 动态创建的 input 上但没同步更新 DOM 实例——结果是点击后只能选一个文件。
-
accept="image/*"在桌面端基本可靠，但在 iOS Safari 中对accept="video/*"支持较弱，建议补充capture="environment"明确调用后置摄像头 -
multiple启用后，e.target.files是FileList，不是单个File，遍历时别直接用e.target.files[0]假设只有一个 - 服务端接收多文件时，注意 PHP 的
$_FILES['name']['name']是数组，Node.js 的multer需用.fields()或.array()显式声明
CSS 隐藏 input 的安全写法
最稳妥的是 position: absolute; left: -9999px;，既彻底脱离文档流、不影响布局，又保留完整可访问性（屏幕阅读器仍能读取）和事件能力。比 display: none 更兼容 Electron 或 WebView 场景。
opacity: 0 也可行，但必须配合 pointer-events: auto（默认就是 auto，但有人会误加 none），否则 label 点击无法穿透到它。
- 绝对定位时记得父容器加
position: relative，否则left: -9999px会相对于 viewport 定位，可能引发滚动条异常 - 别用
width: 0; height: 0; overflow: hidden，部分 Android WebView 下会导致change事件不触发 - 如果项目要过 WCAG 2.1 AA，label 内必须有可见文本（不能纯图标），或补
aria-label
监听文件选择后的常见陷阱
change 事件只在用户真正选中文件（包括取消再重选同名文件）时触发，不会在点击 label 但取消选择时触发——所以不能靠它判断“用户点了按钮”，而应结合 UI 状态管理。
另一个高频问题是多次绑定事件导致重复执行：比如组件重复挂载、或在函数组件中没清理 useEffect 的监听器。
- 选完文件后，
e.target.value是伪路径（如C:\fakepath\abc.jpg），不能用于读取或上传，必须走e.target.files[0] - 清空已选文件不能直接赋值
e.target.value = ''（DOM 只读），得用e.target.type = ''再设回'file'，或克隆节点替换 - 移动端点 label 后唤起相册，用户切到其他 App 再返回，部分安卓机型可能丢失
change事件，建议加防抖 + UI loading 态兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
