先介绍显示文件名,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: "浏览";
}
最终效果如下: