Bootstrap 4 文件输入 [英] Bootstrap 4 File Input
问题描述
我正在努力使用 bootstrap 4 文件浏览器.如果我使用 custom-file-control 我会一直看到选择文件值.https://v4-alpha.getbootstrap.com/components/forms/#file-浏览器
我想在选择文件后更改选择文件的值.这个值实际上隐藏在 css .custom-file-control:lang(en)::after 中，我不知道如何在 javascript 中访问和更改它.我可以像这样获取所选文件的值:
document.getElementById("exampleInputFile").value.split("\").pop();我不需要改变
.custom-file-control:lang(en)::after {content: "选择文件...";}不知何故
链接:http://codepen.io/Matoo125/pen/LWobNp
2021 年更新
引导程序 5
自定义文件输入不再存在，因此要更改 Choose file... 您需要使用 JS 或 一些像这样的 CSS.
引导程序 4.4
也可以使用纯 JavaScript 来显示选定的文件名.这是一个示例，假设标准自定义文件输入带有标签，该标签是输入的下一个同级元素...
document.querySelector('.custom-file-input').addEventListener('change',function(e){var fileName = document.getElementById("myInput").files[0].name;var nextSibling = e.target.nextElementSiblingnextSibling.innerText = 文件名})https://codeply.com/p/LtpNZllird
引导程序 4.1+
现在在 Bootstrap 4.1 中选择文件..."占位符文本在 custom-file-label 中设置:
<输入类型=文件"类=自定义文件输入"id="exampleInputFile"aria-描述的=文件帮助"><label class="custom-file-label";for=exampleInputFile">选择文件...更改浏览"按钮文本需要一点额外的 CSS 或 SASS.还要注意语言翻译如何使用lang="" 属性.
.custom-file-input ~ .custom-file-label::after {内容:按钮文本"；}https://codeply.com/go/gnVCj66Efp (CSS)
https://codeply.com/go/2Mo9OrokBQ (SASS)
另一个 Bootstrap 4.1 选项
或者你可以使用这个自定义文件输入插件
https://www.codeply.com/go/uGJOpHUd8L/file-input
<小时>Bootstrap 4 Alpha 6(原始答案)
我认为这里有两个不同的问题..
1 - 如何更改初始占位符和按钮文本
在 Bootstrap 4 中，initial 占位符值是在 custom-file-control 上设置的，基于 CSS 伪 ::after 元素在 HTML 语言上.初始文件按钮(它不是真正的按钮，但看起来像一个按钮)是使用 CSS 伪 ::before 元素设置的.这些值可以用 CSS 覆盖..
#customFile .custom-file-control:lang(en)::after {内容:选择文件..."；}#customFile .custom-file-control:lang(en)::before {内容:点我"；}2 - 如何获取选定的文件名值，并更新输入以显示该值.
选择文件后，可以使用 JavaScript/jQuery 获取值.
$('.custom-file-input').on('change',function(){var 文件名 = $(this).val();})然而，由于输入的占位符文本是一个伪元素，没有简单的方法可以用 Js/jQuery 来操作它.但是，您可以使用另一个 CSS 类，在选择文件后隐藏伪内容...
.custom-file-control.selected:lang(en)::after {内容:《》！重要的;}一旦选择了文件，使用 jQuery 切换 .custom-file-control 上的 .selected 类.这将隐藏初始占位符值.然后将文件名值放在 .form-control-file 跨度...
$('.custom-file-input').on('change',function(){var 文件名 = $(this).val();$(this).next('.form-control-file').addClass(selected").html(fileName);})然后您可以根据需要处理文件上传或重新选择.
I am struggling with bootstrap 4 file browser. If I use custom-file-control I will see Choose file value all the time. https://v4-alpha.getbootstrap.com/components/forms/#file-browser
I would like to change the value of choose file after the file has been chosen. This value is actually hidden in css .custom-file-control:lang(en)::after and I do not know how to access and change it in javascript. I can get the value of chosen file like this:
document.getElementById("exampleInputFile").value.split("\").pop();
not I need to change
.custom-file-control:lang(en)::after {
content: "Choose file...";
}
somehow
link: http://codepen.io/Matoo125/pen/LWobNp
Updated 2021
Bootstrap 5
Custom file input no longer exists so to change Choose file... you'd need to use JS or some CSS like this.
Bootstrap 4.4
Displaying the selected filename can also be done with plain JavaScript. Here's an example that assumes the standard custom-file-input with label that is the next sibling element to the 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
})
https://codeply.com/p/LtpNZllird
Bootstrap 4.1+
Now in Bootstrap 4.1 the "Choose file..." placeholder text is set in the 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>
Changing the "Browse" button text requires a little extra CSS or SASS. Also notice how language translation works using the lang="" attribute.
.custom-file-input ~ .custom-file-label::after {
content: "Button Text";
}
https://codeply.com/go/gnVCj66Efp (CSS)
https://codeply.com/go/2Mo9OrokBQ (SASS)
Another Bootstrap 4.1 Option
Alternatively you can use this custom file input plugin
https://www.codeply.com/go/uGJOpHUd8L/file-input
Bootstrap 4 Alpha 6 (Original Answer)
I think there are 2 separate issues here..
<label class="custom-file" id="customFile">
<input type="file" class="custom-file-input">
<span class="custom-file-control form-control-file"></span>
</label>
1 - How the change the initial placeholder and button text
In Bootstrap 4, the initial placeholder value is set on the custom-file-control with a CSS pseudo ::after element based on the HTML language. The initial file button (which isn't really a button but looks like one) is set with a CSS pseudo ::before element. These values can be overridden with CSS..
#customFile .custom-file-control:lang(en)::after {
content: "Select file...";
}
#customFile .custom-file-control:lang(en)::before {
content: "Click me";
}
2 - How to get the selected filename value, and update the input to show the value.
Once a file is selected, the value can be obtained using JavaScript/jQuery.
$('.custom-file-input').on('change',function(){
var fileName = $(this).val();
})
However, since the placeholder text for the input is a pseudo element, there's no easy way to manipulate this with Js/jQuery. You can however, have a another CSS class that hides the pseudo content once the file is selected...
.custom-file-control.selected:lang(en)::after {
content: "" !important;
}
Use jQuery to toggle the .selected class on the .custom-file-control once the file is selected. This will hide the initial placeholder value. Then put the filename value in the .form-control-file span...
$('.custom-file-input').on('change',function(){
var fileName = $(this).val();
$(this).next('.form-control-file').addClass("selected").html(fileName);
})
You can then handle the file upload or re-selection as needed.
这篇关于Bootstrap 4 文件输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
