如何動態更新 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

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 取得所選檔案的名稱：

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

• 檔案時隱藏佔位符文字使用CSS 選擇class:

  <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中文網其他相關文章！