如何动态更新 Bootstrap 4 文件输入标签？

Bootstrap 4 Bootbox 入门

理解挑战

在 Bootstrap 4 中，自定义文件输入组件呈现了一个常量“选择文件”标签，无论文件选择如何。要使用所选文件名动态更新此标签，了解 JavaScript 和 CSS 操作至关重要。

Bootstrap 4 文件输入解决方案

版本 4.5及以上：

• 自定义文件输入不再可用。要自定义文件按钮文本，必须使用 CSS 或 JavaScript。

版本 4.1 及更高版本：

• 占位符文本驻留在自定义中-file-label 元素。

• 通过 CSS 设置自定义标签文本：

  <code class="css">.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
  }</code>

Bootstrap 4.1 及更高版本的替代方案：

• 使用自定义文件输入插件，例如：https://www.codeply.com/go/uGJOpHUd8L/file-input

Original Bootstrap 4 Alpha 6 的解决方案：

自定义初始占位符和按钮文本：

• 使用 CSS 覆盖默认占位符和按钮文本:

  <code class="css">#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
  }
  
  #customFile .custom-file-control:lang(en)::before {
  content: "Click me";
  }</code>

检索文件名并更新输入值：

• 使用 JavaScript/jQuery 获取所选文件的name:

  <code class="javascript">$('.custom-file-input').on('change', function() {
    var fileName = $(this).val();
  });</code>

• 选择文件时隐藏占位符文本，使用 CSS 类：

  <code class="css">.custom-file-control.selected:lang(en)::after {
  content: "" !important;
  }</code>

• 切换 CSS文件选择类并将文件名插入表单控制文件范围：

  <code class="javascript">$('.custom-file-input').on('change', function() {
  var fileName = $(this).val();
  $(this).next('.form-control-file').addClass("selected").html(fileName);
  });</code>

以上是如何动态更新 Bootstrap 4 文件输入标签？的详细内容。更多信息请关注PHP中文网其他相关文章！