文件名未显示在引导程序的文件输入中答案

【问题标题】：File name not showing in file input in bootstrap文件名未显示在引导程序的文件输入中
【发布时间】：2020-08-29 15:30:12
【问题描述】：

我有这个 html 代码

<head>
  <link rel="stylesheet" href="./Depd/bootstrap.min.css">
</head>

<body>
  <div class="input-group">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
      <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
    </div>
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
    </div>
  </div>
  <script src="./Depd/jquery.slim.min.js">
  </script>
  <script src="./Depd/popper.min.js"></script>
  <script src="./Depd/bootstrap.min.js"></script>
</body>

当我运行并尝试通过单击浏览并选择一个文件来上传文件时，我想将标签文本更改为我上传的文件的名称，我该如何实现？我正在使用引导程序。如果您不使用引导程序并使用普通 html，它会以默认方式工作并显示文件名。但我必须在这里使用引导程序。所以，请建议一个与引导程序一起使用的解决方案。

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您将需要为此使用一些 JavaScript。我将引导您完成以下步骤：首先检测文件何时上传，然后获取文件名并使用文件名更新标签内容。下面是一个简短的例子。

let input = document.getElementById("inputGroupFile04");
let label = document.querySelector("label[for='inputGroupFile04']");
input.addEventListener("change", e => {
  label.innerText = input.value.split(`C:\\fakepath\\`)[1];
});

<head>
  <link rel="stylesheet" href="./Depd/bootstrap.min.css">
</head>

<body>
  <div class="input-group">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
      <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
    </div>
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
    </div>
  </div>
  <script src="./Depd/jquery.slim.min.js">
  </script>
  <script src="./Depd/popper.min.js"></script>
  <script src="./Depd/bootstrap.min.js"></script>
</body>

如果您需要更多说明，请随时询问。

【讨论】：

一切正常，但问题是它显示了完整的文件路径，我只想要文件名
好的，我会尽快更新它，如果这对您有帮助，如果您能接受答案，我将不胜感激！
我一定会做到的，伙计！它给了我假路径
我刚刚更新它，它现在应该删除假路径部分