Bootstrap 4文件输入
我正在努力使用bootstrap 4文件浏览器。 如果我使用自定义文件控件，我会一直看到选择文件值。 https://v4-alpha.getbootstrap.com/components/forms/#file-browser
我想在选择文件后更改选择文件的值。 这个值实际上隐藏在css .custom-file-control:lang(en)::after ，我不知道如何在javascript中访问和更改它。 我可以像这样得到所选文件的值：
document.getElementById("exampleInputFile").value.split("\\").pop();
不是我需要改变
.custom-file-control:lang(en)::after { content: "Choose file..."; }
不知何故
链接： http ： //codepen.io/Matoo125/pen/LWobNp
2018年更新
Bootstrap 4.1
现在，“选择文件…”占位符文本在custom-file-label ：
更改“浏览”按钮文本需要一些额外的CSS或SASS。
.custom-file-input ~ .custom-file-label::after { content: "Button Text"; }
https://www.codeply.com/go/gnVCj66Efp(CSS ）
https://www.codeply.com/go/2Mo9OrokBQ(SASS ）
还要注意语言翻译如何使用lang=""属性。
Bootstrap 4 Alpha 6
我认为这里有两个不同的问题..
1 – 如何更改初始占位符和按钮文本
在Bootstrap 4中，使用基于HTML语言的CSS pseudo ::after元素在custom-file-control上设置初始占位符值。 初始文件按钮（实际上不是一个按钮，但看起来像一个）是使用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在.custom-file-control上切换.selected类。 这将隐藏初始占位符值。 然后将文件名值放在.form-control-file span中…
$('.custom-file-input').on('change',function(){ var fileName = $(this).val(); $(this).next('.form-control-file').addClass("selected").html(fileName); })
然后，您可以根据需要处理文件上载或重新选择。
Codeply演示（alpha 6）
我就这样解决了
HTML：
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类，如果所选文件名太长，它将隐藏标签内的溢出。
要更改文件浏览器的语言：
作为ZimSystem提到的替代（覆盖CSS），引导文档建议更优雅的解决方案：通过在SCSS中添加语言来构建自定义引导样式
在这里阅读： https ： //getbootstrap.com/docs/4.0/components/forms/#file-browser
注意 ：您需要在文档中正确设置lang属性才能使其正常工作
要更新文件选择的值：
你可以使用这样的内联js来做到这一点：
注意 ： .split('\\').slice(-1)[0]部分删除C：\ fakepath \前缀
Hello, world! Hello, world!