Bootstrap 4文件输入

Question

我正在使用bootstrap 4文件浏览器。如果我使用自定义文件控件，则会一直看到“选择文件值”。

选择文件后，我想更改选择文件的值。此值实际上隐藏在CSS中.custom-file- control:lang(en)::after，我不知道如何在javascript中访问和更改它。我可以这样获得所选文件的值：

document.getElementById("exampleInputFile").value.split("\\").pop();

我不需要改变

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

Answer 1

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 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";
}

Bootstrap 4 Alpha 6 （原始答案）

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

<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语言的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);
})

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