Voici une classe mooTools permettant de choisir une image contenue dans un dossier sur le serveur PHP.

La classe génère à droite de l'input un bouton qui permet d'ouvrir un popup contenant une liste de fichiers images, ainsi que, s'il y en a, les dossiers qui seront cliquables pour en afficher le contenu. Les fichiers et dossiers présentés disposent d'une icône permettant de les identifier comme tel.

Un aperçu de l'image s'affiche au survol de la souris sur le nom du fichier. La sélection du fichier rapatrie dans le champ input la valeur du fichier ainsi que, selon l'option définie lors de l'instanciation de la classe, le chemin relatif au fichier choisi.

Utilisation

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

var elt = $('monelement');

new MooImgCombo(elt, [{ options }]);

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

Les options possibles sont :

• fullpath: Booléen indiquant si le champ input récupère non seulement le nom du fichier mais aussi le chemin relatif.
• repImages: Chaine désignant le répertoire contenant les images et/ou dossiers à afficher dans la liste déroulante.
  

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

C'est dans un programme PHP que la liste des fichiers est constituée et récupérée par un Request via JavaScript. Attention à ce qu'il y ait bien les droits en lecture sur le dossier désigné (au moins 0700 pour www-data).

Téléchargement

mooImgCombo.zip (15 ko)

L'archive contient la classe (fichier mooImgCombo.js), le programme PHP (mooImgCombo.php) et des fichiers graphiques nécessaires à l'affichage de la liste déroulante (Icônes, image d'attente chargement aperçu, image du bouton de la combobox).