浏览器禁止在用户手势链外调用file input的click()，因alert等会中断可信上下文；正确做法是confirm()与click()同层同步执行，或用<dialog>、框架Modal等非阻塞方案，并确保input元素可访问。
不能在 input[type="file"] 触发前用 alert()、confirm() 或 prompt() 拦截并等待用户确认——因为这些原生弹窗会阻塞 JS，导致后续的 click() 调用被浏览器拒绝（静默失败，不报错）。
为什么 alert() + input.click() 会失效
浏览器强制要求：对 input[type="file"] 的 click() 调用，必须发生在用户手势（如 click、touchend）的同步执行栈中。一旦中间插入任何异步环节（包括 alert() 的阻塞），调用就脱离了“可信上下文”，直接被丢弃。
- 现象：点击按钮后弹出
alert()，点确定，但文件选择框没出现，控制台也无报错 - 根本原因：不是代码写错了，是浏览器安全策略主动拦截
- Chrome 95+、Firefox 91+、Safari 15.4+ 全部一致行为，无法绕过
用 confirm() 必须放在点击事件第一层
如果坚持用原生 confirm()，唯一可行方式是把它作为用户点击的**直接响应**，且 input.click() 必须紧跟其后、不跨函数、不同步延迟。
- ✅ 正确写法：
button.addEventListener('click', () => { if (confirm('确定要上传证书？')) { fileInput.click(); } }); - ❌ 错误写法：
button.addEventListener('click', () => { setTimeout(() => { if (confirm('...')) fileInput.click(); // 异步 → 失效 }, 0); }); - ⚠️ 注意：
confirm()本身也阻塞主线程，移动端键盘可能未收起就弹出，体验割裂
推荐方案：用 <dialog> + 手动触发
<dialog> 是非阻塞的现代标准，配合显式事件绑定，能可靠触发 input.click()。
立即学习“前端免费学习笔记（深入）”；
- 关键点：提示框关闭后，立刻在用户点击回调里调
fileInput.click() - 示例结构：
<dialog id="certDialog"> <p>此次上传是否为证书？</p> <button onclick="handleCertYes()">是</button> <button onclick="handleCertNo()">否</button> </dialog> <input type="file" id="fileInput" style="display: none">
-
handleCertYes()内直接写：fileInput.click()—— 这仍是用户点击引发的同步调用，完全合法 - 需确保
<dialog>已挂载到 DOM，且调用showModal()时在用户手势链内（比如从按钮 click 中触发）
Vue/React 等框架中更稳妥的做法
避免所有原生弹窗，改用组件级 modal（如 ElMessageBox、Antd Modal、sweetalert2），它们内部不依赖阻塞式 API，且能精确控制回调时机。
- Vue 示例（Element Plus）：
this.$confirm('是否为证书？', '提示', { confirmButtonText: '是', cancelButtonText: '否', type: 'warning' }).then(() => { this.fileTag = true; this.$refs.fileInput.click(); // ✅ 在 then 回调中，仍属同一用户交互链 }).catch(() => { this.fileTag = false; this.$refs.fileInput.click(); }); - 重点：这类库的
then不是 Promise.then，而是基于事件循环调度的微任务，但浏览器仍将其视为“可信任延续”，允许触发click() - 比手写
<dialog>更省心，兼容性兜底更好
最易被忽略的一点：无论用哪种提示方式，input[type="file"] 元素本身不能用 display: none 或 visibility: hidden 隐藏——它必须可聚焦、可被辅助技术读取。推荐用 position: absolute; opacity: 0; pointer-events: none; 覆盖在自定义按钮上，或直接用 <label for="xxx"> 包裹。
