Aktualisiert 2016
Bootstrap 4.4
Das Anzeigen des ausgewählten Dateinamens kann auch mit einfachem JavaScript erfolgen. Hier ist ein Beispiel, das die standardmäßige Eingabe einer benutzerdefinierten Datei mit Beschriftung voraussetzt, die das nächste Geschwisterelement zur Eingabe ist ...
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
})
https://codeply.com/p/LtpNZllird
Bootstrap 4.1+
Jetzt wird in Bootstrap 4.1 der Platzhaltertext "Datei auswählen ..." gesetzt in custom-file-label
:
<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 etwas zusätzliches CSS oder SASS. Beachten Sie auch, wie die Sprachübersetzung mithilfe des lang=""
Attributs funktioniert .
.custom-file-input ~ .custom-file-label::after {
content: "Button Text";
}
https://codeply.com/go/gnVCj66Efp (CSS)
https://codeply.com/go/2Mo9OrokBQ (SASS)
Eine weitere Bootstrap 4.1-Option
Alternativ können Sie dieses benutzerdefinierte Dateieingabe-Plugin verwenden
https://www.codeply.com/go/uGJOpHUd8L/file-input
Bootstrap 4 Alpha 6 (Originalantwort)
Ich denke, hier gibt es zwei 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 ändern Sie den anfänglichen Platzhalter und den Schaltflächentext
In Bootstrap 4 wird der anfängliche Platzhalterwert custom-file-control
mit einem CSS-Pseudoelement festgelegt ::after
, das auf der HTML-Sprache basiert. Die anfängliche Dateischaltfläche (die eigentlich keine Schaltfläche ist, aber wie eine aussieht) wird mit einem CSS-Pseudoelement festgelegt ::before
. 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 - So erhalten Sie den ausgewählten Dateinamenwert und aktualisieren 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 Pseudoelement ist, gibt es keine einfache Möglichkeit, dies mit Js / jQuery zu ändern . Sie können jedoch eine andere CSS-Klasse haben, die den Pseudoinhalt verbirgt, sobald die Datei ausgewählt ist ...
.custom-file-control.selected:lang(en)::after {
content: "" !important;
}
Verwenden Sie jQuery, um die .selected
Klasse nach .custom-file-control
Auswahl der Datei umzuschalten. Dadurch wird der anfängliche Platzhalterwert ausgeblendet. Geben Sie dann den Dateinamen in den Bereich ein .form-control-file
...
$('.custom-file-input').on('change',function(){
var fileName = $(this).val();
$(this).next('.form-control-file').addClass("selected").html(fileName);
})
Sie können dann den Datei-Upload oder die erneute Auswahl nach Bedarf durchführen.
Demo auf Codeply (Alpha 6)