javascript - Bootstrap 4 文件输入

Question

我正在努力使用 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

Answer 1

2021 年更新

Bootstrap 5

自定义文件输入不再存在，因此要更改 Choose file... 您需要使用 JS 或 some CSS like this。

Bootstrap 4.4

显示选定的文件名也可以使用纯 JavaScript 完成。这是一个假设标准自定义文件输入的示例，其标签是输入的下一个同级元素...

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+

现在在 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。还要注意 language translation works 如何使用 lang="" 属性。

.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}

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

另一个 Bootstrap 4.1 选项

或者你可以使用这个 custom file input plugin

https://www.codeply.com/go/uGJOpHUd8L/file-input

---

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 中，initial 占位符值是在 custom-file-control 上使用基于 CSS 伪 ::after 元素设置的在 HTML 语言上。初始文件按钮(实际上不是按钮，但看起来像一个按钮)是使用 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();
})

但是，由于输入的占位符文本是伪元素，因此 there's no easy way to manipulate this with 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);
})

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

Demo on Codeply (alpha 6)