为什么选择文件后文件名不显示在文件输入中？ [复制]答案

【问题标题】：Why doesn't the filename display in a file input after selecting a file? [duplicate]为什么选择文件后文件名不显示在文件输入中？ [复制]
【发布时间】：2020-04-20 19:57:41
【问题描述】：

我有一些使用引导程序选择文件的 html/css。选择后不应该显示文件名吗？它不在 Mac 上的 Firefox 或 Chrome 中。

<div class="custom-file">
  <input type="file" class="custom-file-input" id="inputGroupFile01">
  <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>

你可以在https://jsfiddle.net/mauricev/kgmhs895/看到代码失败

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

您没有加载和初始化所需的自定义文件输入插件。它不包含在核心 Bootstrap 包中。

用于动画自定义文件输入的推荐插件：bs-custom-file-input，这是我们目前在文档中使用的插件。

https://getbootstrap.com/docs/4.4/components/forms/#file-browser

<!DOCTYPE html>
<html lang="en" dir="ltr">

    <head>

        <meta charset="utf-8">

        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans" />

        <style>
            body {
                font-family: "Open Sans";
            }

        </style>

    </head>

    <body class="bg-light">
        <div class="container">
            <form class="needs-validation" action="" method="post">
                <div class="row">
                    <div class="col-md-8 mb-3">
                        <div class="input-group">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="inputGroupFile01">
                                <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <script>
            $(document).ready(function() {
                bsCustomFileInput.init()
            });

        </script>
    </body>

</html>

【讨论】：

【解决方案2】：

您需要一些脚本才能使其正常工作。获取输入更改事件的文件名并将其附加到输入字段。这对你有用。

$(document).ready(function(){
  $('#inputGroupFile01').on('change',function(){
      //get the file name
      var fileName = $(this).val();
      //replace the "Choose a file" label
      $(this).next('.custom-file-label').html(fileName);
  })
})

body {
   font-family: "Open Sans";
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans" />

<body class="bg-light">
  <div class="container">
    <form class="needs-validation" action="" method="post" >
      <div class="row">
        <div class="col-md-8 mb-3">
          <div class="input-group">
            <div class="custom-file">
              <input type="file" class="custom-file-input" id="inputGroupFile01">
              <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</body>

【讨论】：