Basato sulla soluzione assolutamente geniale di @claviska, alla quale è dovuto tutto il merito.
Input di file Bootstrap 4 con funzionalità complete con convalida e testo di aiuto.
Sulla base dell'esempio del gruppo di input abbiamo un campo di testo di input fittizio utilizzato per visualizzare il nome file per l'utente, che viene popolato onchangedall'evento sul campo del file di input effettivo nascosto dietro il pulsante etichetta. Oltre a includere il supporto per la validazione di bootstrap 4 , abbiamo anche reso possibile fare clic in qualsiasi punto dell'input per aprire la finestra di dialogo del file.
Tre stati dell'input del file
I tre stati possibili sono non convalidati, validi e non validi con il requiredset di attributi tag di input html fittizio .
Markup HTML per l'input
Introduciamo solo 2 classi personalizzate input-file-dummye input-file-btnper modellare e collegare correttamente il comportamento desiderato. Tutto il resto è markup Bootstrap 4 standard.
<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>
Disposizioni comportamentali JavaScript
L'input fittizio deve essere letto solo, come nell'esempio originale, per impedire all'utente di modificare l'input che può essere modificato solo tramite la finestra di dialogo Apri file. Sfortunatamente la validazione non si verifica sui readonlycampi, quindi attiviamo / disattiviamo la modificabilità dell'input su focus e blur ( eventi jquery onfocusin e onfocusout) e assicuriamo che ritorni validabile una volta selezionato un file.
Oltre a rendere anche selezionabile il campo di testo, attivando l'evento click del pulsante, @claviska ha immaginato il resto della funzionalità di popolamento del campo fittizio.
$(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();
});
});
});
Modifiche in stile personalizzato
Soprattutto non vogliamo che il readonlycampo salti tra sfondo grigio e bianco, quindi assicuriamo che rimanga bianco. Il pulsante span non ha un cursore del puntatore ma dobbiamo comunque aggiungerne uno per l'input.
.input-file-dummy, .input-file-btn {
cursor: pointer;
}
.input-file-dummy[readonly] {
background-color: white;
}
nJoy!
