Bootstrap 4文件输入 [英] Bootstrap 4 File Input

问题描述

我正在努力使用bootstrap 4文件浏览器。如果我使用自定义文件控件，我会一直看到选择文件值。
https://v4-alpha.getbootstrap.com/components/表格/＃文件浏览器

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

我想在选择文件后更改选择文件的值。这个值实际上隐藏在css .custom-file-control：lang（en）:: after 之后，我不知道如何在javascript中访问和更改它。我可以像这样得到所选文件的值：

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

我不需要更改

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

不知何故

链接： http://codepen.io/Matoo125/pen/LWobNp

推荐答案

2018年更新

Updated 2018

Bootstrap 4.1

现在，选择文件...占位符文本设置在 custom-文件标签 ：

Now 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>

更改浏览按钮文本需要额外的CSS或SASS。

Changing the "Browse" button text requires a little extra CSS or 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）

https://www.codeply.com/go/gnVCj66Efp (CSS)
https://www.codeply.com/go/2Mo9OrokBQ (SASS)

另外注意如何使用 lang 语言翻译工作 =属性。

Also notice how language translation works using the lang="" attribute.

Bootstrap 4 Alpha 6

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

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 - 如何更改初始占位符和按钮文本

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

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 - 如何获取所选的文件名值，并更新输入以显示值。

选择文件后，可以使用JavaScript / jQuery获取值。

Once a file is selected, the value can be obtained using JavaScript/jQuery.

$('.custom-file-input').on('change',function(){
    var fileName = $(this).val();
})

但是，由于输入的占位符文本是伪元素，没有简单的方法来使用Js / jQuery来操纵它。但是，一旦选择了文件，您就可以拥有另一个隐藏伪内容的CSS类...

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

使用jQuery切换 .selected .custom-file-control 上的c $ c>类。这将隐藏初始占位符值。然后将文件名值放在 .form-control-file span ...

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.

Codeply演示（alpha 6）

这篇关于Bootstrap 4文件输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！