Bootstrap 4文件输入

Bootstrap 4文件输入

Bootstrap 4.4

显示选定的文件名也可以使用纯Javascript完成。这是一个示例，假定带有标签的标准custom-file-input是输入的下一个兄弟元素…

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})

Bootstrap 4.1+

现在，在Bootstrap 4.1中，在以下位置设置了“选择文件…”占位符文本

custom-file-label

：

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

更改“浏览”按钮文本需要一些额外的CSS或SASS。还要注意使用属性进行语言翻译的方式

lang=""

。

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

Bootstrap 4 Alpha 6 （原始答案）

我认为这里有2个独立的问题。

<label  id="customFile">        <input type="file" >        <span ></span></label>

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

在Bootstrap 4中，使用基于HTML语言的CSS伪元素在上设置初始占位符值。初始文件按钮（实际上不是按钮，但看起来像一个按钮）是使用CSS伪元素设置的。这些值可以用CSS覆盖。

custom-file-control``::after``::before

#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);})

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