【问题标题】: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>

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

    【讨论】:

    • 一切正常,但问题是它显示了完整的文件路径,我只想要文件名
    • 好的,我会尽快更新它,如果这对您有帮助,如果您能接受答案,我将不胜感激!
    • 我一定会做到的,伙计!它给了我假路径
    • 我刚刚更新它,它现在应该删除假路径部分
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-11-24
    • 1970-01-01
    • 2012-10-15
    • 1970-01-01
    • 1970-01-01
    • 2015-07-25
    • 1970-01-01
    相关资源
    最近更新 更多