Comment puis-je personnaliser la saisie du fichier HTML5 à l'aide de CSS et JavaScript ?

Personnalisation du composant "Fichier d'entrée" à l'aide de CSS3 et Javascript

Style du un composant utilisant CSS3 et JavaScript est possible. Alternativement, vous pouvez créer un div stylisé qui déclenche le navigateur de fichiers lorsque vous cliquez dessus.

Style CSS3

Pour styliser le composant du fichier d'entrée, vous pouvez utiliser CSS3. Par exemple, les styles suivants peuvent être appliqués :

input[type="file"] {
    display: none;
}

Cela masquera le composant d'entrée de fichier par défaut.

Implémentation JavaScript/jQuery

À l'aide de JavaScript ou de jQuery, vous pouvez améliorer les fonctionnalités du fichier composant. Par exemple, vous pouvez créer un div qui déclenche le navigateur de fichiers lorsque vous cliquez dessus :

<div>
<pre class="brush:php;toolbar:false">#file {
    display: none;
}

var wrapper = $('<div>').css({height: 0, width: 0, 'overflow': 'hidden'});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function() {
    $this = $(this);
    $('#file').text($this.val());
});

$('#file').click(function() {
    fileInput.click();
}).show();<p>Ce script masque le composant du fichier d'entrée d'origine et crée un div cliquable intitulé "Choisir un fichier". Lorsque l'on clique sur le div, il ouvre le navigateur de fichiers.</p>
</div>