HTML file input对话框打开文件资源管理器后卡住的原因排查

• 隐藏file input的方式不合理
  直接用display:none隐藏文件输入框，部分浏览器会因为元素完全脱离渲染流，导致其触发的文件选择对话框无法正常调用系统组件。建议改用视觉隐藏但保留元素交互能力的样式：

  #fileId {
    position: absolute;
    left: -9999px;
    opacity: 0;
  }
  

• jQuery版本兼容性问题
  你使用的jQuery 3.3.1版本较旧，可能和当前主流浏览器的API存在兼容性冲突，导致点击事件的触发逻辑异常。建议升级到最新稳定版jQuery。

• 浏览器或系统进程异常
  文件选择对话框依赖系统的文件资源管理器组件，如果浏览器进程占用过高卡顿，或者系统资源管理器本身出现故障，都会导致对话框卡住。可以尝试重启浏览器，或者清理系统后台占用资源的进程后再测试。

• 锚点标签的默认行为干扰
  <a href="#">标签的默认行为会触发页面锚点跳转，可能和file input的点击事件产生冲突，导致交互流程异常。可以修改为按钮元素，或者在onclick事件中阻止默认行为：

  <a href="#" onclick="$('#fileId').click(); return false;">Upload</a>
  

修改后的完整示例代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<button onclick="$('#fileId').click();">Upload</button>
<input type="file" id="fileId" style="position:absolute; left:-9999px; opacity:0;">

内容的提问来源于stack exchange，提问作者newbies