I. Introduction▲
Le Web 2.0, on ne le présente plus... tout le monde connaît maintenant le principe : une interface tournée vers l'utilisateur et donc des plus agréables possibles.
En parlant d'interface, comment gérez-vous l'envoi multiple de fichiers vers votre serveur ? Les solutions minimales sont souvent peu élégantes : inputs de type "file" à
répétition, applet Java, etc.
Je vous propose ici une source Javascript qui permet d'uploader autant de fichiers que l'utilisateur désire, avec un unique input apparent et une gestion de la liste des
fichiers à uploader.
II. Fonctionnement▲
Je n'entrerai pas dans les détails du fonctionnement de ce script car il est très simple. Mais afin que vous compreniez le code (qui est tout de même commenté !), voici le principe
général de cette petite source :
Tout d'abord, un premier constat : pour uploader plusieurs fichiers, il nous faut plusieurs input -un par fichier- et un formulaire de type "multipart/form-data". Il n'est donc pas
question de ne créer qu'un unique input et de tout gérer avec celui-ci. Pour enrayer tout de suite certaines questions redondantes, il n'est pas possible avec les mécanismes AJAX
d'envoyer un fichier à un serveur, car javascript -pour des raisons évidentes de sécurité- n'a pas accès au disque dur du client.
L'idée du script est donc de créer un input pour chaque fichier à uploader, mais d'en n'afficher toujours qu'un seul. Pour cela, on crée un premier input au chargement de la page,
auquel on associé un événement onchange.
Cet événement sera déclenché lorsque l'utilisateur aura choisi un fichier à uploader. A ce moment, le nom du fichier est ajouté à la liste d'upload et l'input est caché. Il est
immédiatement remplacé par un nouvel input, prêt à recevoir un nouveau fichier.
Supprimer un fichier consiste simplement à supprimer l'élément input correspondant et à enlever le nom du fichier de la liste d'upload.
Les inputs étant ajoutés dans le formulaire, un simple bouton de type submit permet d'envoyer le tout. Le script PHP fourni dans l'exemple récapitule les fichiers envoyés
pour attester du bon fonctionnement du script.
J'ai ajouté quelques effets Scriptaculous dans ce script afin de rendre le tout plus agréable. N'oubliez donc pas d'inclure les bibliothèques prototype et scriptaculous à
vos propres fichiers !
III. Test et téléchargement▲
Vous trouverez le script en ligne à des fins de test, ici.
Vous pouvez télécharger le script complet avec une page d'exemple d'utilisation ici : MultiUpload.zipMultiUpload.zip (serveur FTP de secoursserveur FTP de secours)