Bootstrap 5.3.5：使用按钮隐藏input[type='file']无响应问题求助

你的问题出在按钮和隐藏的文件输入框没有绑定交互逻辑，单纯隐藏input[type="file"]后，点击按钮并不会自动唤起文件选择弹窗。下面提供两种符合Bootstrap规范的解决方案：

方法1：使用<label>替代按钮（Bootstrap官方推荐） #

利用<label>元素的原生特性——点击label会触发关联的input控件，无需额外JS：

<div class="input-group mb-3">
  <label class="btn btn-outline-secondary" for="image">Upload</label>
  <input id="image" name="image" type="file" class="form-control" accept="image/*" aria-label="Upload" hidden>
</div>

• 把原按钮换成<label>，通过for属性绑定文件输入框的id
• 保留hidden属性隐藏原生文件输入框

方法2：给按钮添加JavaScript触发逻辑 #

如果必须使用<button>元素，需要通过JS手动触发文件输入框的点击事件：

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button" id="btn-upload">Upload</button>
  <input id="image" name="image" type="file" class="form-control" accept="image/*" aria-label="Upload" hidden>
</div>

<script>
document.getElementById('btn-upload').addEventListener('click', function() {
  document.getElementById('image').click();
});
</script>

• 给按钮绑定点击事件，在事件回调中调用文件输入框的click()方法
• 若需要，可额外添加文件选择后的处理逻辑（比如显示选中的文件名）

注意：不要给按钮设置type="submit"（除非你需要表单提交逻辑），避免和文件选择行为冲突。

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