Voici une classe mooTools permettant de relooker un input de type file.

L'astuce reprise pour que cela fonctionne est celle de masquer le champ de type file dans un div qui sert de bouton pour déclencher la recherche du fichier. Une fois la sélection du fichier faite, le champ de type file est à jour et en cas de soumission du formulaire le fichier sera transmit à un programme php action du form.

La classe est très simple, elle permettra de personnaliser à son gré l'aspect d'un champ de type file, chose impossible à ma connaissance en conservant l'objet de base.

Utilisation

L'utilisation de la classe se fait en instanciant la classe avec comme paramètre un élément input de type file :

var elt = $('monelement');

new MooUpCombo(elt);

Attention à bien redéfinir la variable repUCScript dans le script avec le dossier qui contient le script.

L'utilisation de ce script nécessite que la bibliothèque mooTools soit chargé ainsi que le fichier mooUpCombo.js et l'instanciation de la classe doit se faire dans l'évênement domready de l'objet window.

Téléchargement

mooUpCombo.zip (1.41ko)

L'archive contient la classe (fichier mooUpCombo.js) et un fichier graphique (bull_down.png) pour le bouton qui permet de lancer la recherche du fichier à envoyer sur le poste client.