Oparty na absolutnie genialnym rozwiązaniu @claviska, któremu należy się cały kredyt.
W pełni funkcjonalny Bootstrap 4 wejścia plików z walidacji i tekstem pomocy.
W oparciu o przykład grupy wejściowej mamy fikcyjne pole tekstowe używane do wyświetlania nazwy pliku dla użytkownika, które jest zapełniane onchangezdarzeniem w polu wejściowym pliku ukrytym za przyciskiem etykiety. Oprócz włączenia obsługi sprawdzania poprawności bootstrap 4, umożliwiliśmy także kliknięcie w dowolnym miejscu na wejściu, aby otworzyć okno dialogowe pliku.
Trzy stany pliku wejściowego
Trzy możliwe stany są niepotwierdzone, poprawne i niepoprawne z requiredustawionym atrybutem fikcyjnego tagu wejściowego HTML .
Znaczników HTML dla wejścia
Wprowadzamy tylko 2 niestandardowe klasy input-file-dummyi input-file-btnodpowiednio stylizujemy i łączymy pożądane zachowanie. Cała reszta jest standardowym znacznikiem Bootstrap 4.
<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>
Przepisy dotyczące zachowania JavaScript
Atrapa wejścia musi być tylko do odczytu, jak w oryginalnym przykładzie, aby uniemożliwić użytkownikowi zmianę danych wejściowych, które można zmienić tylko za pomocą okna dialogowego otwartego pliku. Niestety sprawdzanie poprawności nie występuje na readonlypolach, więc przełączamy edytowalność danych wejściowych na fokus i rozmycie ( zdarzenia jquery onfocusin i onfocusout) i upewniamy się, że będzie ponownie sprawdzana po wybraniu pliku.
Oprócz umożliwienia kliknięcia pola tekstowego, wyzwalając zdarzenie kliknięcia przycisku, pozostałe funkcje wypełniania pola zastępczego zostały zaplanowane przez @claviska.
$(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();
});
});
});
Ulepszenia stylu niestandardowego
Co najważniejsze, nie chcemy, aby readonlypole przeskakiwało między szarym tłem a bielą, dlatego zapewniamy, że pozostanie białe. Przycisk zakresu nie ma kursora kursora, ale i tak musimy go dodać do danych wejściowych.
.input-file-dummy, .input-file-btn {
cursor: pointer;
}
.input-file-dummy[readonly] {
background-color: white;
}
nJoy!
