Je voulais un système d’upload multiple pour l’administration de PicsEngine. J’ai trouvé un début de système sur je ne sais plus quel site qui permettait d’ajouter plusieurs “file input” à un formulaire.

Le problème est que les fichiers étaient envoyés sur la même page d’un seul coup. Les désavantages étaient:
- Lenteur du chargement (envoyer 10 images d’un coup.. ca craint un peu).
- Possibilité d’arrêt du script php derrière à cause du temps d’execution
- Si un problème avec un fichier, on ne sait pas vraiment lesquels ont été envoyés etc..

Je voulais quelque-chose qui permettait d’envoyer plusieurs fichiers mais sans recharger la page. Chaque fichier est envoyé indépendamment, et lorsqu’un upload a raté, on passe au suivant sans problème.

Du côté d’AJAX c’était mort puisqu’on ne parle pas d’envoi de chaine de caractères, mais de fichiers sur le disque dur, qui ne sont pas encore uploadés.

La dernière possibilité était de faire une passerelle avec une iframe cachée, que l’on utilise pour envoyer le formulaire. L’envoi du formulaire est transparent et ca permet de faire des callbacks en javascript à partir de l’iframe sur la page principale.

Le principe même de la classe, est de gérer l’emplacement des inputs par rapport au formulaire. Lorsque le fichier précédent est envoyé complètement, on supprime son input, et on le remplace par le fichier suivant.. ensuite on revalide le formulaire en javascript.

Lorsqu’un fichier est envoyé (via un script php côté serveur), il faut donner l’ordre au script javascript de placer l’input suivant.. ce qui se fait grâce à la fonction “nextElement”. On appelle donc cette fonction dans le fichier php, à la fin du script d’upload.

Pendant qu’un fichier est en train d’être envoyé, les inputs des fichiers à envoyer par la suite sont cachés dans un DIV. La liste UL des différents fichiers n’est la que par ordre indicative.. car ce sont des “input file” qui servent au formulaire. Lorsqu’on clique sur le lien “supprimer” d’une ligne de la liste, la ligne (LI) de la liste ainsi que son input file correspondant sont supprimés.

Voici un exemple.
Télécharger l’exemple et la classe lib.multiUpload.js

La classe est pas vraiment optimisée.. mais j’ai eu la flemme après les deux jours passés sur ce script.
Evidemment ce système est intégré à PicsEngine pour l’envoi des photos.

J’espère avoir été assez clair. C’est un système très précaire mais je n’ai trouvé que cette solution.