Wie aktualisiere ich Bootstrap 4-Dateieingabebezeichnungen dynamisch?

Erste Schritte mit Bootstrap 4 Bootbox

Die Herausforderung verstehen

In Bootstrap 4 präsentiert die benutzerdefinierte Dateieingabekomponente eine Konstante Beschriftung „Datei auswählen“, unabhängig von der Dateiauswahl. Um dieses Etikett dynamisch mit dem Namen der ausgewählten Datei zu aktualisieren, sind Kenntnisse der JavaScript- und CSS-Manipulation unerlässlich.

Die Bootstrap 4-Dateieingabelösung

Version 4.5 und höher:

• Benutzerdefinierte Dateieingabe ist nicht mehr verfügbar. Um den Text der Dateischaltfläche anzupassen, muss CSS oder JavaScript verwendet werden.

Version 4.1 und höher:

• Der Platzhaltertext befindet sich im benutzerdefinierten -file-label-Element.

• Legen Sie einen benutzerdefinierten Beschriftungstext über CSS fest:

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

Alternative für Bootstrap 4.1 und höher:

• Verwenden Sie ein benutzerdefiniertes Dateieingabe-Plugin, wie zum Beispiel: https://www.codeply.com/go/uGJOpHUd8L/file-input

Original Lösung für Bootstrap 4 Alpha 6:

Anfängliche Platzhalter- und Schaltflächentexte anpassen:

• Standardplatzhalter und Schaltflächentexte mit CSS überschreiben :

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

Dateinamen abrufen und Eingabewert aktualisieren:

• Verwenden Sie JavaScript/jQuery, um die ausgewählten Dateien abzurufen Name:

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

• Platzhaltertext ausblenden, wenn eine Datei ausgewählt wird, mithilfe einer CSS-Klasse:

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

• CSS umschalten Klasse zur Dateiauswahl und fügen Sie den Dateinamen in den Bereich form-control-file ein:

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

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich Bootstrap 4-Dateieingabebezeichnungen dynamisch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!