Bootstrap 4文件输入

Bootstrap 4文件输入,第1张

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

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



欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5588097.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-14
下一篇 2022-12-14

发表评论

登录后才能评论

评论列表(0条)

保存