Bootstrap文件上传（Custom file input）显示文件名及中文化

先介绍显示文件名，Bootstrap官网上的 Custom file input 在文件上传时是支持文件名显示的，效果是下面这样：

但当我将这些用在自己页面上时，却显示不了文件名，只有当鼠标放在上传框时，才会有文件名的提示：

通过下面的代码可以让Bootstrap上传框显示上传文件的文件名，当input发生改变时会调用showFilename函数显示文件名。

<!-- 以下代码从Bootstrap官网上copy，仅为input添加了onchange，以及添加了label的id -->
<div class="input-group">
  <div class="custom-file">
    <input onchange="showFilename(this.files[0])" type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
    <label id="filename_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>
function showFilename(file){
    $("#filename_label").html(file.name);
}
</script>

下面介绍中文化，label 以及 button 的中文化直接在HTML文件中修改即可，但这样修改不了文件上传框的 Browse ，只能达到下面的效果：

要将 Browse 修改为中文，可以直接修改官方的 bootstrap.css 文件，也可以编写自己的 css 文件覆盖官方的样式，自己编写的 css 文件如下：

.custom-file-input:lang(zh) ~ .custom-file-label::after {
  content: "浏览";
}

.custom-file-label::after {
  content: "浏览";
}

最终效果如下：