Wie ändere ich die Dateiauswahlanzeige in Bootstrap?

Bootstrap-Dateieingabe: Anzeige der Dateiauswahl ändern

Bei Verwendung des Dateibrowsers von Bootstrap 4 kann es zu Problemen bei der Anzeige der Standardeinstellung „Auswählen“ kommen Datei..." Text. Dieser Text wird mithilfe von CSS im .custom-file-control-Element festgelegt, was mit JavaScript schwierig zu ändern sein kann.

Bootstrap 5

In Bootstrap 5 benutzerdefiniert Die Dateieingabe wurde entfernt. Daher erfordert das Ändern der Dateiauswahlanzeige benutzerdefinierte CSS- oder JavaScript-Techniken.

Bootstrap 4.4

Um den ausgewählten Dateinamen in Bootstrap 4.4 anzuzeigen, kann JavaScript verwendet werden:

<code class="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;
});</code>

Bootstrap 4.1

Ab Bootstrap 4.1 wird der Platzhalter „Datei auswählen...“ im .custom-file-label-Element festgelegt:

<code class="html"><label class="custom-file-label" for="exampleInputFile">
  Select file...
</label></code>

Das Ändern des Schaltflächentextes kann mit CSS erfolgen:

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

Originalantwort (Bootstrap 4 Alpha 6)

Um den anfänglichen Platzhalter zu ändern und Schaltflächentext kann CSS verwendet werden:

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

Um den ausgewählten Dateinamen abzurufen und die Anzeige zu aktualisieren, kann JavaScript verwendet werden:

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

Da der Platzhaltertext jedoch a ist Da es sich um ein Pseudoelement handelt, kann JavaScript es nicht direkt ändern. Eine Problemumgehung besteht darin, eine CSS-Klasse hinzuzufügen, die den Pseudoinhalt verbirgt, und den Dateinamen im Bereich .form-control-file span:

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

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

zu platzieren

Das obige ist der detaillierte Inhalt vonWie ändere ich die Dateiauswahlanzeige in Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!