核心逻辑很简单：通过label的for属性关联文件输入框的id，点击label就能触发文件选择弹窗；再用CSS或Bootstrap类把原生文件输入框隐藏掉，确保视觉上不可见但功能正常。

纯Pug+CSS实现方案 #

如果不想依赖Bootstrap，直接用自定义CSS就能搞定，这种方式兼容性更好：

form
  //- 点击这个label会触发下方的文件输入框
  label(for="custom-file-upload") 选择要上传的文件
  //- 隐藏的文件输入框
  input(type="file", id="custom-file-upload", class="hidden-file")

//- 内嵌样式，也可以放到外部CSS文件里
style.
  .hidden-file {
    position: absolute;
    opacity: 0;
    z-index: -1;
    width: 0;
    height: 0;
    overflow: hidden;
  }

这种隐藏方式不会用display: none（部分旧浏览器会导致控件无法被触发），而是通过绝对定位+透明度0+层级置底，让输入框完全不可见但依然能响应触发事件。

结合Bootstrap的实现方案 #

既然你之前用Bootstrap实现过，直接用Bootstrap的内置类更省心，推荐用visually-hidden类（Bootstrap 4及以上版本支持），它专门用于视觉隐藏但保留可访问性：

form
  label(for="bs-file-upload") 选择文件上传
  input(type="file", id="bs-file-upload", class="visually-hidden")

如果是老版本Bootstrap，也可以用sr-only类，效果和visually-hidden一致。

排查要点 #

• 必须保证label的for属性值和input的id完全匹配，大小写也要一致
• 避免用display: none隐藏输入框，否则部分浏览器会无法触发文件选择弹窗
• 检查页面是否有其他CSS规则覆盖了隐藏样式，导致输入框重新显示

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