En regardant le code source des exemples ci-dessous, vous constaterez qu'on peut construire un module de téléchargement sur mesure en utilisant les classes "UpAbci_..." comme récepteur d'information et les css dynamiques "data-upabcicss..." pour gérer leur affichage ou d'autres éléments html en fonction du retour des événements en temps réel.

La classe dispose également de fonctions javascript événementielles. Des exemples d'utlisations simples sont donnés dans l'exemple n°6 ci-dessous et le fichier "Custom", et des exemples plus avancés sont donnés dans les fichiers de "Crop" et "Contrôle input text".

A noter que vous pouvez ajouter d'autres champs de type "text" ou autre dans les formulaires, il seront transmis automatiquement et il vous suffira de les récupérer côté serveur avec la fonction php "urldecode()". Les champs avec la notation tableau sont également acceptés. Si vous souhaitez ajouter des champs spécifiques pour chaque fichier dans un upload multiple, voir les fichiers de "Crop".

Chaque formulaire supporte l'upload multiple et possède des comportements d'affichage spécifiques commentés dans le code source. Les boutons de sélection customisés acceptent les comportements onclick et drag and drop.

(Pour supprimer la possibilité d'upload multiple, il suffit de supprimer la propriété multiple="multiple" de l'input de type file dans le html)


Upload 1 : limité aux extensions avi, divx, mp4, mkv, mpg, jpg, jpeg, png, gif
Upload 2 : limitation des fichiers à 100 Mo
Upload 3 : demande de confirmation en cas de reprise d'upload

Upload 4 : aperçu des images avec condition : 10 Mo max par image et 100 Mo total (les images dépassant 10 Mo ne sont pas totalisées)
Upload 5 : max image preview total = 100Mo, information du nouveau nom si le fichier a été renommé + informations de fin de traitement serveur
Upload 6. Utilisation des fonctions javascript événementielles. Ici j'ai utilisé une fonction qui est activée en fin de traitement du formulaire pour permettre de fermer la boite d'information en cliquant sur le bouton "Upload terminé" (qui s'affiche en fin de traitement).

Index