Basé sur la solution @claviska absolument géniale, à qui tout le crédit est dû.
Entrée de fichier Bootstrap 4 complète avec validation et texte d'aide.
Sur la base de l' exemple de groupe d'entrée, nous avons un champ de texte de saisie factice utilisé pour afficher le nom de fichier à l'utilisateur, qui est rempli à partir de l' onchangeévénement sur le champ de fichier d'entrée réel caché derrière le bouton d'étiquette. En plus d'inclure le support de validation bootstrap 4, nous avons également permis de cliquer n'importe où sur l'entrée pour ouvrir la boîte de dialogue de fichier.
Trois états de l'entrée du fichier
Les trois états possibles sont non validés, valides et invalides avec le requiredjeu d' attributs de balise d'entrée html factice .
Balisage HTML pour l'entrée
Nous introduisons seulement 2 classes personnalisées input-file-dummyet input-file-btnpour styliser et câbler correctement le comportement souhaité. Tout le reste est un balisage 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>
Dispositions comportementales JavaScript
L'entrée factice doit être en lecture seule, comme dans l'exemple d'origine, pour empêcher l'utilisateur de modifier l'entrée qui ne peut être modifiée que via la boîte de dialogue d'ouverture de fichier. Malheureusement, la validation ne se produit pas sur les readonlychamps, nous basculons donc l'éditabilité de l'entrée sur le focus et le flou ( événements jquery onfocusin et onfocusout) et nous assurons qu'elle redevient validable une fois qu'un fichier est sélectionné.
En plus de rendre le champ de texte cliquable, en déclenchant l'événement click du bouton, le reste des fonctionnalités de remplissage du champ fictif a été envisagé par @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();
});
});
});
Modifications de style personnalisé
Plus important encore, nous ne voulons pas que le readonlychamp passe entre le fond gris et le blanc, nous nous assurons donc qu'il reste blanc. Le bouton span n'a pas de curseur pointeur mais nous devons quand même en ajouter un pour l'entrée.
.input-file-dummy, .input-file-btn {
cursor: pointer;
}
.input-file-dummy[readonly] {
background-color: white;
}
nJoy!
