Ich bin mit Bootstrap 4 Datei-Browser zu kämpfen. Wenn ich benutzerdefinierte Datei-Steuerelement verwenden, werde ich sehen, wählen Sie Datei Wert die ganze Zeit. https://v4-alpha.getbootstrap.com/components/forms/#file-browser
Ich möchte den Wert von Datei wählen ändern, nachdem die Datei ausgewählt wurde. Dieser Wert ist eigentlich in css .custom-file-control:lang(en)::after
versteckt und ich weiß nicht, wie ich darauf zugreifen und ihn in Javascript ändern kann. Ich kann den Wert der ausgewählten Datei wie folgt erhalten:
document.getElementById("exampleInputFile").value.split("\\").pop();
nicht ich muss ändern
.custom-file-control:lang(en)::after {
content: "Choose file...";
}
irgendwie
Aktualisiert 2018
Bootstrap 4.1+
In Bootstrap 4.1 wird nun der "Choose file..." Platzhaltertext im custom-file-label
gesetzt:
<div class="custom-file" id="customFile" lang="es">
<input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp">
<label class="custom-file-label" for="exampleInputFile">
Select file...
</label>
</div>
Das Ändern des Textes der Schaltfläche "Durchsuchen" erfordert ein wenig zusätzliches CSS oder SASS. Beachten Sie auch, wie die Sprachübersetzung funktioniert unter Verwendung des Attributs lang=""
.
.custom-file-input ~ .custom-file-label::after {
content: "Button Text";
}
https://www.codeply.com/go/gnVCj66Efp (CSS)
https://www.codeply.com/go/2Mo9OrokBQ (SASS)
Eine weitere Bootstrap 4.1 Option
Alternativ können Sie auch dieses custom file input plugin verwenden
https://www.codeply.com/go/uGJOpHUd8L/file-input
Bootstrap 4 Alpha 6 (Originalantwort)
Ich denke, es gibt hier 2 verschiedene Probleme...
<label class="custom-file" id="customFile">
<input type="file" class="custom-file-input">
<span class="custom-file-control form-control-file"></span>
</label>
1 - Wie ändert man den anfänglichen Platzhalter und den Text der Schaltfläche
In Bootstrap 4 wird der initiale Platzhalterwert auf dem "custom-file-control" mit einem CSS pseudo "::after" Element basierend auf der HTML-Sprache gesetzt. Die anfängliche Datei-Schaltfläche (die nicht wirklich eine Schaltfläche ist, aber wie eine aussieht) wird mit einem CSS-Pseudo-Element "::before" festgelegt. Diese Werte können mit CSS überschrieben werden.
#customFile .custom-file-control:lang(en)::after {
content: "Select file...";
}
#customFile .custom-file-control:lang(en)::before {
content: "Click me";
}
**2 - Wie erhalte ich den Wert des ausgewählten Dateinamens und wie aktualisiere ich die Eingabe, um den Wert anzuzeigen?
Sobald eine Datei ausgewählt ist, kann der Wert mit JavaScript/jQuery abgerufen werden.
$('.custom-file-input').on('change',function(){
var fileName = $(this).val();
})
Da der Platzhaltertext für die Eingabe jedoch ein Pseudo-Element ist, gibt es keine einfache Möglichkeit, dieses mit Js/jQuery zu manipulieren. Sie können jedoch eine andere CSS-Klasse einrichten, die den Pseudo-Inhalt ausblendet, sobald die Datei ausgewählt ist...
.custom-file-control.selected:lang(en)::after {
content: "" !important;
}
Verwenden Sie jQuery, um die Klasse .selected
auf dem .custom-file-control
umzuschalten, sobald die Datei ausgewählt ist. Dadurch wird der anfängliche Platzhalterwert ausgeblendet. Setzen Sie dann den Wert für den Dateinamen in die .form-control-file
span...
$('.custom-file-input').on('change',function(){
var fileName = $(this).val();
$(this).next('.form-control-file').addClass("selected").html(fileName);
})
Sie können dann das Hochladen oder die Neuauswahl der Datei nach Bedarf behandeln.
Ich habe es einfach so gelöst
Html:
<div class="custom-file">
<input id="logo" type="file" class="custom-file-input">
<label for="logo" class="custom-file-label text-truncate">Choose file...</label>
</div>
JS:
$('.custom-file-input').on('change', function() {
let fileName = $(this).val().split('\\').pop();
$(this).next('.custom-file-label').addClass("selected").html(fileName);
});
Anmerkung: Dank an ajax333221 für den Hinweis auf die Klasse .text-truncate
, die den Überlauf im Label ausblendet, wenn der ausgewählte Dateiname zu lang ist.
Zum Ändern der Sprache des Dateibrowsers:__ Als Alternative zu dem, was ZimSystem erwähnte (das CSS überschreiben), wird in den Bootstrap-Dokumenten eine elegantere Lösung vorgeschlagen: Erstellen Sie Ihre eigenen Bootstrap-Stile, indem Sie Sprachen in SCSS hinzufügen Lesen Sie hier darüber: https://getbootstrap.com/docs/4.0/components/forms/#file-browser
Hinweis: Sie müssen das lang-Attribut in Ihrem Dokument richtig gesetzt haben, damit dies funktioniert.
Für die Aktualisierung des Wertes bei der Dateiauswahl: Du könntest es mit inline js wie folgt machen:
<label class="custom-file">
<input type="file" id="myfile" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\\').slice(-1)[0])">
<span class="custom-file-control"></span>
</label>
Hinweis: der Teil .split('\\').slice(-1)[0]
entfernt das Präfix C:\fakepath\