浏览器禁止异步调用input.click()触发文件选择，必须在用户点击事件的同步回调中直接执行；推荐用<label>包裹实现语义化、无障碍友好的触发，避免display:none或opacity:0未配pointer-events:auto等隐藏方式。
为什么直接 click() 原生 <input type="file"> 会失败
浏览器明确禁止 JavaScript 自动触发 <input type="file"> 的 click() 方法，除非该调用由用户手势（如 click、touchend）同步发起。异步调用（比如 setTimeout、Promise.then）、事件委托链过长、或在非用户交互回调中触发，都会静默失败——不报错，也不弹窗。
这不是兼容性问题，而是所有现代浏览器（Chrome 90+、Firefox 91+、Safari 15.4+）的统一安全策略。所以别试图“绕过”，要顺应它。
- 必须把
fileInput.click()放在用户真实点击事件的同步回调里（比如按钮的onclick或addEventListener('click', ...)的第一层函数体中） - 不能封装成独立函数再异步调用；不能在
change、input等后续事件里反向触发 - 移动端需注意：
touchstart不算可靠手势，优先用click（iOS Safari 对touchend+click双触发有兜底）
<label> 包裹方案最省事且语义正确
不用 JS，仅靠 HTML 结构就能让自定义按钮触发文件选择框，核心是利用 <label> 的天然透传能力。只要 <input type="file"> 是 <label> 的直接子元素，点击 label 就等价于点击 input。
关键点不是“隐藏”，而是“保功能”：input 必须可聚焦、可被屏幕阅读器读取、能响应 JS 调用。所以不要用 display: none 或 visibility: hidden。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 推荐写法：
<label class="upload-btn"> <input type="file" accept="image/*" multiple> 选择图片 </label>
- 对应 CSS 隐藏 input：
label .upload-btn input { position: absolute; left: -9999px; }（安全、稳定、无障碍友好） - 避免用
for属性 + ID 配对——多实例时易冲突，且 iOS Safari 在某些accept+multiple组合下会失效 - label 内文本或图标可自由样式化，button 标签也能用，但需加
role="button"和tabindex="0"才语义完整
用 JS 手动触发时，opacity: 0 不等于“隐藏成功”
很多人试过给 <input type="file"> 加 opacity: 0，结果点击自定义按钮没反应。这不是代码写错了，是浏览器主动拦截：当 opacity 为 0 且未显式设置 pointer-events: auto 时，部分环境（尤其启用了 VoiceOver 的 macOS/iOS、或 Chrome 移动端）会拒绝激活该元素。
更糟的是，这种失败是静默的——控制台无报错，DOM 也正常，就是点不动。
- 如果坚持用
opacity: 0，必须显式声明：input { opacity: 0; pointer-events: auto; } - 但即便如此，在辅助功能开启时仍可能被忽略；
position: absolute; left: -9999px更稳妥 -
clip-path: inset(100%)或clip: rect(0 0 0 0)也是安全替代，但 IE 已淘汰，不必兼容 - 绝对不要用
display: none——Safari 会彻底忽略click()调用，哪怕你手动触发
文件名显示和上传按钮联动容易漏掉的细节
用户选完文件后，常需要显示文件名并启用上传按钮。这里有两个典型坑：
-
input.files是FileList对象，不是数组，不能直接用.map()或.forEach()；取文件名要用input.files[0]?.name或展开为数组：Array.from(input.files).map(f => f.name) - 监听
change事件才可靠；input事件在 file input 上基本无效 - 移动端 iOS Safari 有时会触发两次
change（比如取消再选），建议加防抖或用input.files.length判断是否真有文件 - 上传按钮启用逻辑别只依赖 JS 显示/隐藏——服务端仍需校验，前端只是体验优化
真正麻烦的从来不是怎么弹窗，而是怎么让弹窗之后的每一步都稳住：从可访问性到多端一致性，再到用户操作路径的容错设计。这些地方没卡点，样式再花哨也没用。
