Umgehen der Einschränkungen der Dateieingabe von Bootstrap 4

Bootstrap 4 bietet eine benutzerdefinierte Dateieingabekomponente, um die Dateiauswahl für Benutzer zu vereinfachen. Wenn Sie jedoch den Platzhaltertext „Datei auswählen...“ anpassen oder den Namen der ausgewählten Datei anzeigen möchten, könnten einige Herausforderungen auftreten.

Ändern der Platzhalter in Bootstrap 4.1 und höher

Seit Bootstrap 4.1 befindet sich der Platzhaltertext im Element „custom-file-label“. Sie können es mit CSS überschreiben:

.custom-file-label::after {
  content: "Select file...";
}

Text der Dateischaltfläche optimieren

Bootstrap 4.1 bietet keine einfache Methode zum Ändern des Texts der Dateischaltfläche. Um dies zu erreichen, sollten Sie erwägen, einen benutzerdefinierten Stil hinzuzufügen:

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

Ausgewählten Dateinamen in Bootstrap 4.4 anzeigen

Mit Bootstrap 4.4 können Sie den Namen der ausgewählten Datei mithilfe von einfachem JavaScript anzeigen:

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

Pre-Bootstrap 4.1-Optionen:

Anfangsplatzhalter ausblenden:

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

Anzeige des ausgewählten Dateinamens:

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

Diese Ansätze bieten Flexibilität beim Anpassen der Dateieingabekomponente von Bootstrap 4, sodass Sie sie an Ihre spezifischen Anforderungen anpassen können.