Upload AJAX - HTML5 - PHP
Bonjour,
Version 5.2c en ligne
Nouveau mode d'emploi pour cette dernière version. Fait en html il dispose d'un menu et de nombreux liens - ce qui était impossible avec l'ancienne version pdf - rendant les informations plus vites accessibles.
Des paragraphes ont été ajoutés :
- Liste des méthodes de la classe serveur php
- Visibilité des fichiers uploadés
- Méthodes équivalentes à la fonction Transfert() si l'on ne souhaite pas utiliser cette fonction pour sauvegarder le fichier côté serveur
- Listes des classes php de services (connexion bdd, validation, crop etc.)
- Interactions Javascript/Serveur. Utile pour ceux qui souhaiteraient employer une autre technologie serveur que Php.
Bref il est plus complet et beaucoup plus pratique que l'ancien mode d'emploi en pdf qui a donc disparu du dossier, tout est maintenant dans la page "index.html".
Niveau code, pas de nouvelles fonctionnalités, 1 à 2 petites optimisations très marginales côté javascript et côté php.
Voilà ! Au passage, la longueur du mode d'emploi (page d'index) risque de faire un peu peur à ceux qui voudraient "juste une solution d'upload Ajax" :zen:
Don't be afraid 8-)
C'est parce qu'il y a beaucoup de méthodes disponibles. Cependant, quelques lignes de code suffisent, aussi bien côté client que côté serveur pour configurer un upload qui bénéficiera des principales fonctionnalités. De plus les exemples sont progressifs, fonctionnels et certains customisés de sorte que vous pouvez vous en servir directement en moins de 3 minutes si vous utilisez php côté serveur : le temps de dézipper le dossier et de le mettre sur votre serveur.
Et pour ceux qui veulent aller plus loin que le simple prêt à porter, il y a aussi de la matière ;)
Edit : Une version 5.2c+ vient remplacer la précédente, le correcteur orthographique est passé par là et quelques explications secondaires ont été ajoutées.
Upload AJAX - HTML5 - PHP avec compatibilité IE >= 7
Version 6.0 en ligne
Mises à jour
Classe Javascript d'upload
- Création d'une fonction événementielle "config.func_BrowserOutdeted()" qui sera exécutée si le script détecte un navigateur obsolète.
- Suppression de la propriété "uniqid_file" dans les objets spécifiques aux fichiers. Cette propriété n'était pas indispensable au fonctionnement du script.
- Détection d'une propriété "join_file" dans les objets spécifiques aux fichiers. Cette propriété "libre" n'est pas définie ni utilisée par la classe javascript. Cependant, si on la défini par l'intermédiaire d'une fonction événementielle, elle sera jointe à la requête ajax et récupérable côté serveur. Pratique pour joindre des informations spécifiques à chaque fichier sans besoin de créer des champs textes dynamiquement en javascript.
A cette occasion je donne un exemple d'implémentation du plugin jQuery fileEXIF qui permet de retourner les informations EXIF des photos provenant d'appareils photo numériques dans le fichier "UploadAjaxABCI_Redimensions_Exif.php".
Classe Php d'upload Ajax
La classe a été scindée en deux parties, une classe "UploadABCIServices" regroupant les services avec les fonctions fréquemment utilisées dans les scripts d'upload, et la classe d'upload Php/Ajax "UploadAjaxABCIServeur" spécifique à la classe javascript, qui hérite de cette classe de services. Cela permet d'appeler la petite classe de services indépendamment de la classe d'upload Php/Ajax.
La classe Php/Ajax a été complétée pour récupérer l'éventuelle propriété "join_file" de chaque fichier.
Amélioration des fichiers d'exemples existants :
De nombreux fichiers ont été améliorés parfois simplement au niveau des css, mais plus notablement les scripts proposant le recadrage qui ont profité de la nouvelle propriété "join_file" pour transmettre les données de crop vers le serveur et ainsi simplifier le code.
Nouveau
Création d'une classe serveur compatible avec les navigateurs obsolètes
La classe javascript dispose d'une option de configuration by-pass "config.browserOutdeted" qui permet d'envoyer le contenu du post directement vers l'adresse indiquée dans l'attribut "action" du formulaire en cas de détection de navigateurs obsolètes. Dans ce cas, seule la fonction javascript "config.func_BrowserOutdeted()" sera exécutée (si définie).
La classe "UploadFormABCIServeur.php" (100% php) est prévue pour traiter les fichiers en provenance directe du formulaire. Elle hérite également de la classe de services. Pour rendre les scripts compatibles IE >= 7, il suffit donc à l'aide de cette classe, de rajouter une couche php sur le script standard compatible IE >= 10.
4 nouveaux fichiers d'exemples
En complément du fichier "UploadAjaxABCI_Redimensions_Exif.php" cité plus haut, trois fichiers d'exemples compatibles avec les navigateurs obsolètes sont fournis pour mettre en application cette nouvelle classe serveur :
- UploadAjaxABCI_Basique_CompNavObs.php
- UploadAjaxABCI_Redimensions_CompNavObs.php
- UploadAjaxABCI_Inscription_Photo_CompNavObs.php
Ces trois fichiers d'exemple bénéficient des mêmes fonctionnalités pour les navigateurs compatibles mais permettent de traiter l'upload pour les navigateurs IE < 10. En cas de navigateur < IE10 les services sont réduits puisque le traitement est fait uniquement en php. Il sera donc impossible d'avoir des sauvegardes intermédiaires pour les gros fichiers, ni de dépasser les configurations serveur "post_mas_size", "upload_max_filesize" et "max_file_uploads". Cependant ces erreurs de dépassement sont correctement gérées et les fonctions de redimensionnements et autres fonctions de traitement serveur sont implémentées.
Seuls cas où vous n'avez aucun intérêt à cette compatibilité pour navigateurs obsolètes :
- Si l'objet principal du formulaire est de charger des très gros fichiers (seuls les navigateurs récents pourront utiliser la classe javascript qui permet de dépasser les configurations serveur et de disposer d'une sauvegarde temporaire).
- Si l'objet principal du formulaire est de recadrer des photos avant l'upload (seuls les navigateurs récents pourront utiliser la classe javascript qui permet la prévisualisation des images et l'implémentation du plugin JQuery de crop).
- Ou si vous lisez ce message dans quelques années :lol:
Correction fichiers d'exemples
- "UploadAjaxABCI_Inscription_Photo_Crop.php"
Un défaut d'affichage a été corrigé qui se produisait dans le cas où le visiteur tentait de modifier des champs textes déjà enregistrés après une erreur d'upload. La requête de vérification des données textuelles se relançait et affichait des informations erronées (mais sans incidence sur les données enregistrées côté serveur). Corrigé. D'autres petites améliorations événementielles ont également été apportées.
- "UploadAjaxABCI_Crop_multiple_multiple.php"
Cet exemple a entre autre pour particularité d'enregistrer les crops effectués et de les réintégrer en cas de sélections successives des fichiers déjà recadrés, tant que ceux-ci ne sont pas envoyés vers le serveur. Mais si les crops étaient correctement réintégrés visuellement sur leurs photos respectives, ils n'étaient pas pris en compte par le serveur sauf si l'on recadrait à nouveau la photo avant l'upload. Il manquait quelques lignes de code... Corrigé.
Mise à jour du mode d'emploi
Le mode d'emploi a été mis à jour pour documenter les nouvelles fonctions et classes, d'autres précisions ont été ajoutées ici et là.
Voilà, ce module possède maintenant des exemples "tout terrain" qui permettent de l'utiliser sans arrière pensée pour les navigateurs obsolètes puisqu'ils sont supportés, tout en bénéficiant de fonctionnalités avancées pour les navigateurs récents :)
Note : Comme précédemment je suis passé de la version 5.2c+ à la version 6.0 pour indiquer que les fichiers ne sont pas interchangeables d'une version à l'autre du fait de la réorganisation importante du code côté serveur et quelques propriétés javascript ont été ajoutées/supprimées. Vos scripts d'upload déjà créés fonctionneront sans problème si vous mettez à jour simultanément la classe Javascript ET les classes serveur Php qui doivent avoir le même numéro de version ;)