Dateiname im Dateibrowser - Bootstrap 4 - Hervorragende Bibliothek

Dem Dateibrowser in Boostrap 4 fehlt der Dateiname. Es sagt nur Wählen Sie Datei ... Ich habe eine Javascript-Lösung dafür gemacht. Gibt es einen besseren Weg, es zu lösen?Dateiname im Dateibrowser - Bootstrap 4

HTML

<label class="file"> 
    <input type="file" id="file1" > 
    <span class="file-custom" data-content="Choose file..."></span> 
</label>

jQuery

$("input[type=file]").change(function(){ 
    var fieldVal = $(this).val(); 
    if (fieldVal != undefined || fieldVal != "") { 
     $(this).next(".file-custom").attr('data-content', fieldVal); 
    } 
});

CSS

.file-custom:after { 
    content: attr(data-content); 
}

Der einzige Unterschied ist, dass Sie Daten-Inhalt auf die Spanne hinzufügen müssen. Auf der anderen Seite erleichtert es die Sprache zu wechseln.

Link zu Bootstraps Datei-Browser: http://v4-alpha.getbootstrap.com/components/forms/#file-browser

Quelle

2016-05-31 user1891758

Dies ist nicht wirklich ein Problem mit Bootstrap selbst (4 auch bei weitem nicht die Produktion bereit ist, , also solltest du hier nicht wirklich um Hilfe bitten). Ihre Lösung (Bearbeiten des CSS-Inhalts) ist wahrscheinlich der sauberste Weg, um es ehrlich zu machen. – fisk

Ich kenne Version 4, es ist noch nicht fertig. Aber wir benutzen es immer noch, also könnte das eine vorübergehende Lösung sein ... Die Zeit wird uns sagen – user1891758

Danke, das hat mir etwas Zeit gespart. Ich verwende Ihre Lösung leicht modifiziert. – BarryMode

wie Bootstrap Sieht jetzt lehnt sich auf keine JS Lösung für diese Zugabe und stattdessen wird wahrscheinlich so etwas wie Ihr Skript in der Dokumentation als vorgeschlagene Implementierung einschließlich, bezogen auf mdo Kommentare hier, wo es auch eine viel vollständigere Lösung: https://github.com/twbs/bootstrap/issues/20813

ich habe Ihre einfachen Code aktualisiert Bootstrap 4 Alpha 6.

jQuery

$("input[type=file]").change(function() { 
    var fieldVal = $(this).val(); 
    if (fieldVal != undefined || fieldVal != "") { 
    $(this).next(".custom-file-control").attr('data-content', fieldVal); 
    } 
});

CSS

.custom-file-control:after { 
    content: attr(data-content) !important; 
}

Edit:

Die oben zeigt so etwas wie C:\\fakepath... im Stil Eingang, wir auch bekommen kann nur der Dateiname selbst zu anzeigen, mit event.target.files[0].name:

$("input[type=file]").change(function (event) { 
    var fieldVal = event.target.files[0].name; 
    if (fieldVal != undefined || fieldVal != "") { 
    $(this).next(".custom-file-control").attr('data-content', fieldVal); 
    } 
});

Quelle

2017-04-27 02:12:42

auf Joeys Antwort Anknüpfend, für Bootstrap 4 öffentliche Version würden Sie jetzt verwenden diese JS und kein CSS:

$("input[type=file]").change(function() { 
    var fieldVal = $(this).val(); 
    if (fieldVal != undefined || fieldVal != "") { 
     $(this).next(".custom-file-label").text(fieldVal); 
    } 
});

Quelle

2018-01-26 13:50:47 lukemcd

Dateiname im Dateibrowser - Bootstrap 4

Antwort

Verwandte Themen