Bootstrap 5 - 访问文件输入标签（显示文件名的位置）答案

【问题标题】：Bootstrap 5 - Access file input label (where filename is displayed)Bootstrap 5 - 访问文件输入标签（显示文件名的位置）
【发布时间】：2021-09-17 06:39:07
【问题描述】：

我正在寻找一种在 javascript 中使用引导程序 5 访问显示上传类型字段的文件名的方法：https://getbootstrap.com/docs/5.0/forms/form-control/#file-input

目前的渲染是这样的：

<div>
  <label for="formFileLg" class="form-label">Large file input example</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

而且我不明白如何手动将“未选择文件”更改为 javascript 中的动态内容（好吧，我已经有代码来确定我想要显示的内容，但无法访问它）

【问题讨论】：

标签： javascript file input filenames

【解决方案1】：

In jQuery:

<div>
  <label for="formFileLg" class="form-label">Large file input example</label>
  <input class="form-control form-control-lg" id="formFileLg" type="text" Placeholder="Click toupload file">

  <input style="display:none" id="uploadform" type="file">
</div>

$('#formFileLg').click(function() {
  $('#uploadform').trigger('click');
});

您可以根据自己的需要设置DIV，给它一个ID并将其用作上传点击的基本元素

【讨论】：