2021 年更新

引导程序 5

自定义文件输入不再存在，因此要进行更改，Choose file...您需要使用 JS 或一些像这样的 CSS。

引导程序 4.4

也可以使用纯 JavaScript 来显示选定的文件名。这是一个示例，假设标准自定义文件输入带有标签，该标签是输入的下一个同级元素...

document.querySelector('.custom-file-input').addEventListener('change',function(e){
  var fileName = document.getElementById("myInput").files[0].name;
  var nextSibling = e.target.nextElementSibling
  nextSibling.innerText = fileName
})

https://codeply.com/p/LtpNZllird

引导程序 4.1+

现在在 Bootstrap 4.1 中，“选择文件...”占位符文本设置在custom-file-label：

<div class="custom-file" id="customFile" lang="es">
        <input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp">
        <label class="custom-file-label" for="exampleInputFile">
           Select file...
        </label>
</div>

更改“浏览”按钮文本需要一点额外的 CSS 或 SASS。还要注意语言翻译是如何使用该lang=""属性进行的。

.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}

https://codeply.com/go/gnVCj66Efp（CSS）
https://codeply.com/go/2Mo9OrokBQ（SASS）

另一个 Bootstrap 4.1 选项

或者，您可以使用此自定义文件输入插件

https://www.codeply.com/go/uGJOpHUd8L/file-input

Bootstrap 4 Alpha 6（原始答案）

我认为这里有两个不同的问题..

<label class="custom-file" id="customFile">
        <input type="file" class="custom-file-input">
        <span class="custom-file-control form-control-file"></span>
</label>

1 - 如何更改初始占位符和按钮文本

在 Bootstrap 4 中，初始占位符值设置在基于 HTML 语言custom-file-control的 CSS 伪::after元素上。初始文件按钮（它不是真正的按钮，但看起来像一个按钮）是用 CSS 伪::before元素设置的。这些值可以用 CSS 覆盖..

#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}

2 - 如何获取选定的文件名值，并更新输入以显示该值。

选择文件后，可以使用 JavaScript/jQuery 获取该值。

$('.custom-file-input').on('change',function(){
    var fileName = $(this).val();
})

但是，由于输入的占位符文本是一个伪元素，因此没有简单的方法可以使用 Js/jQuery 来操作它。但是，您可以使用另一个 CSS 类，在选择文件后隐藏伪内容...

.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}

选择文件后，使用 jQuery 切换.selected类.custom-file-control。这将隐藏初始占位符值。然后将文件名值放入.form-control-file跨度...

$('.custom-file-input').on('change',function(){
  var fileName = $(this).val();
  $(this).next('.form-control-file').addClass("selected").html(fileName);
})

然后，您可以根据需要处理文件上传或重新选择。

Codeply 上的演示（alpha 6）

我就是这样解决的

网址：

<div class="custom-file">
   <input id="logo" type="file" class="custom-file-input">
   <label for="logo" class="custom-file-label text-truncate">Choose file...</label>
</div>

JS：

$('.custom-file-input').on('change', function() { 
   let fileName = $(this).val().split('\\').pop(); 
   $(this).next('.custom-file-label').addClass("selected").html(fileName); 
});

注意：感谢ajax333221提到.text-truncate如果所选文件名太长将隐藏标签内溢出的类。

从Bootstrap 4.3 开始，您可以更改标签标签内的占位符和按钮文本：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="custom-file">
  <input type="file" class="custom-file-input" id="exampleInputFile">
  <label class="custom-file-label" for="exampleInputFile" data-browse="{Your button text}">{Your placeholder text}</label>
</div>

对于更改文件浏览器的语言：
作为ZimSystem提到的替代方案（覆盖 CSS），引导程序文档建议了一个更优雅的解决方案：通过在 SCSS 中添加语言来构建自定义引导程序样式在
此处阅读：https： //getbootstrap.com/docs/4.0/components/forms/#file-browser

注意：您需要在文档中正确设置 lang 属性才能使其工作

要更新文件选择的值：
您可以使用内联 js 来完成，如下所示：

   <label class="custom-file">
      <input type="file" id="myfile" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\\').slice(-1)[0])">
      <span class="custom-file-control"></span>
   </label>

注意：该.split('\\').slice(-1)[0]部分删除了C:\fakepath\前缀

引导程序 4

更多细节在这里 https://learncodeweb.com/snippets/browse-button-in-bootstrap-4-with-select-image-preview/

今天我需要创建一个带有多个上传文件选项的浏览按钮，上面的所有片段都不适合我。

当我选择多个文件时，官方 Bootstrap 示例也不起作用。

我想出了这个代码，也许将来会帮助其他人。

$(document).ready(function() {
  $('input[type="file"]').on("change", function() {
    let filenames = [];
    let files = document.getElementById("customFile").files;
    if (files.length > 1) {
      filenames.push("Total Files (" + files.length + ")");
    } else {
      for (let i in files) {
        if (files.hasOwnProperty(i)) {
          filenames.push(files[i].name);
        }
      }
    }
    $(this)
      .next(".custom-file-label")
      .html(filenames.join(","));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
  <h1 class="text-center">Bootstrap 4 Upload multiple files</h1>
  <div class="col-sm-6 mr-auto ml-auto border p-4">
    <form method="post" enctype="multipart/form-data" action="upload.php">
      <div class="form-group">
        <label><strong>Upload Files</strong></label>
        <div class="custom-file">
          <input type="file" name="files[]" multiple class="custom-file-input form-control" id="customFile">
          <label class="custom-file-label" for="customFile">Choose file</label>
        </div>
      </div>
      <div class="form-group">
        <button type="submit" name="upload" value="upload" id="upload" class="btn btn-block btn-dark"><i class="fa fa-fw fa-upload"></i> Upload</button>
      </div>
    </form>
  </div>
</div>

此处给出了引导程序 3 和引导程序 4.3.1的工作代码示例。

https://codepen.io/mianzaid/pen/GeEbYV