Basierend auf der absolut brillanten @laviska-Lösung, der der gesamte Kredit geschuldet wird.
Voll funktionsfähige Bootstrap 4-Dateieingabe mit Validierung und Hilfetext.
Basierend auf dem Beispiel einer Eingabegruppe haben wir ein Dummy-Eingabetextfeld, das zum Anzeigen des Dateinamens für den Benutzer verwendet wird und das vom onchangeEreignis in das tatsächliche Eingabedateifeld eingetragen wird, das hinter der Beschriftungsschaltfläche versteckt ist. Abgesehen von der Unterstützung der Bootstrap 4-Validierung haben wir es auch möglich gemacht, auf eine beliebige Stelle auf die Eingabe zu klicken, um den Dateidialog zu öffnen.
Drei Zustände der Dateieingabe
Die drei möglichen Zustände sind nicht validiert, gültig und ungültig, wenn der Attributsatz requiredfür das Dummy-HTML-Eingabe-Tag festgelegt ist.
HTML-Markup für die Eingabe
Wir führen nur 2 benutzerdefinierte Klassen ein, um das gewünschte Verhalten richtig zu formatieren input-file-dummyund input-file-btnzu verkabeln. Alles andere ist Standard Bootstrap 4 Markup.
<div class="input-group">
<input type="text" class="form-control input-file-dummy" placeholder="Choose file" aria-describedby="fileHelp" required>
<div class="valid-feedback order-last">File is valid</div>
<div class="invalid-feedback order-last">File is required</div>
<label class="input-group-append mb-0">
<span class="btn btn-primary input-file-btn">
Browse… <input type="file" hidden>
</span>
</label>
</div>
<small id="fileHelp" class="form-text text-muted">Choose any file you like</small>
Verhaltensbestimmungen für JavaScript
Die Dummy-Eingabe muss gemäß dem ursprünglichen Beispiel schreibgeschützt sein, um zu verhindern, dass der Benutzer die Eingabe ändert, die nur über den Dialog zum Öffnen von Dateien geändert werden kann. Leider findet keine Validierung für readonlyFelder statt, daher schalten wir die Bearbeitbarkeit der Eingabe auf Fokus und Unschärfe ( jquery events onfocusin und onfocusout) um und stellen sicher, dass sie nach Auswahl einer Datei wieder validierbar wird.
Abgesehen davon, dass das Textfeld durch Klicken des Klickereignisses der Schaltfläche anklickbar gemacht wurde, wurde der Rest der Funktionalität zum Auffüllen des Dummy-Felds von @claviska ins Auge gefasst.
$(function () {
$('.input-file-dummy').each(function () {
$($(this).parent().find('.input-file-btn input')).on('change', {dummy: this}, function(ev) {
$(ev.data.dummy)
.val($(this).val().replace(/\\/g, '/').replace(/.*\//, ''))
.trigger('focusout');
});
$(this).on('focusin', function () {
$(this).attr('readonly', '');
}).on('focusout', function () {
$(this).removeAttr('readonly');
}).on('click', function () {
$(this).parent().find('.input-file-btn').click();
});
});
});
Benutzerdefinierte Stiländerungen
Am wichtigsten ist, dass das readonlyFeld nicht zwischen grauem und weißem Hintergrund wechselt, damit es weiß bleibt. Die Span-Schaltfläche hat keinen Zeigercursor, aber wir müssen trotzdem einen für die Eingabe hinzufügen.
.input-file-dummy, .input-file-btn {
cursor: pointer;
}
.input-file-dummy[readonly] {
background-color: white;
}
nJoy!
