Upload Ajax Php, informations temps réel, fonctions et styles événementiels, filigranes, recadrages, redimensions et optimisation d'images, surpasse les limites serveur, reprise d'upload.

Bonjour,

La version 2.2 est en ligne ici !

3 options de configuration et 2 options d'information ont été ajoutées dans la classe javascript

- config.requete_upload_fin = false; // booléen true ou false. Si = true, une requête additionnelle est envoyée au script php pour indiquer la fin de traitement de tous les fichiers (excepté si config.requete_sans_fichier = false et qu'aucun fichier n'a été soumis). Utile uniquement côté serveur si besoin.

- config.max_filesize_utilisateur = null;// taille maximale du fichier utilisateur. Si = 0 ou null aucune vérification n'est faite sur la taille du fichier. Accepte un nombre en octets ou une chaine de caractère formatée avec les unités. Les espaces et la lettre "o" sont optionnels et le formatage ne tient pas compte de la casse. Par exemple 1073741824 = '1073741824o' = '1024Mo' = '1024 M' = '1048576k' = '1048576 Ko' = '1 go' = '1 G'. Les nombres décimaux sont acceptés.

- config.extensions_autorisees = [];// Tabelau des extensions autorisées. Les variantes majuscules/minuscules sont automatiquement prises en compte. Si le tableau est vide aucune vérification n'est faite.

- info.status.erreur_taille = 'Dépassement de la taille maximale autorisée. ';// message si dépassement de "config.max_filesize_utilisateur".

- info.status.erreur_extension = 'Extension non valide. ';// message si l'extension ne fait pas partie du tableau "config.extensions_autorisees".

Note importante : Les fonctions de contrôle de taille et d'extension des fichiers ont été créées pour faciliter l'expérience utilisateur. Celui-ci n'a plus à attendre la fin de l'upload d'un fragment de fichier pour avoir le message d'avertissement correspondant qui est maintenant instantané. Cependant comme on ne doit pas faire confiance aux contrôles javascript ces mêmes contrôles devraient être refaits par sécurité côté serveur (pas obligatoire pour le fonctionnement du code mais vivement conseillé).

3 fonctions ont été ajoutées dans la classe php

- getUploadFin() // qui permet d'exploiter la configuration ajax "config.requete_upload_fin".

- getFichierNomOriginel() // qui permet de retourner le nom originel du fichier.

- Return_Octets() // qui facilite la conversion d'une chaine formatée (ex : '1000 Mo', '1 Go', '1.2 G') en octets.

Tous les fichiers dont le mode d'emploi et le fichier d'exemples ont été mis à jour

P.S La version 2.2 est la version qui succède à la version 2.0. La version 2.1 est une version interne intermédiaire qui n'a pas été mise en ligne.

Version 5.0c2 en ligne

Améliorations

1/ Refonte de l'organisation du code php côté serveur :
- Autoload pour les services (upload, redimensionnements, recadrages, connexion bdd, etc)
- Ajout de classes : "Validateur" pour les champs de formulaires, "C_PDO" (connexion bdd), "SetMessages" et "Messages" pour la gestion des messages.
- Centralisation de tous les messages dans un fichier unique afin de faciliter d'éventuelles traductions / personnalisations.
- Ajout de fonctions (documentées dans le fichier "UploadAjaxABCIServeur.php" permettant d'éviter l'utilisation de la fonction "Transfert()" auparavant indispensable pour l'upload des fichiers. Peut éventuellement simplifier le code serveur dans certains cas.

2/ Ajout d'un exemple de formulaire d'inscription avec avatar optionnel et éventuellement recadré (crop) :
- Formulaire unique aux yeux du visiteur regroupant en fait deux formulaire distincts.
- Permet de n'envoyer le formulaire d'upload qu'après que les données de l'inscription soient vérifiées et validées. Répond à cette question.
- Tous les messages renvoyés côté client et côté serveur sont centralisés dans un fichier unique.

3/ Mise à jour du mode d'emploi
- avec ajout d'un paragraphe spécial débutants pour la mise en production, l'externalisation des formulaires et des dossiers d'upload.

4/ Petites améliorations côté javascript :
- Changement de l'ancrage des crop pour tous les exemples permettant le recadrage (permet d'alléger un peu les scripts).
- Utilisation du mode "strict" déclaré en haut du code javascript de chaque exemple. Vous pouvez supprimer cette déclaration si nécessaire en cas d'ajout d'autres scripts ne supportant pas ce mode.
- Correction de quelques commentaires et de la variable globale ci-dessous.

Correction

Correction à apporter pour les versions antérieures à la V 5.0c2, dans le fichier "UploadAjaxABCI_Crop_multiple_multiple.php" :
Une variable globale s'était malencontreusement glissée dans le code javascript de ce fichier d'exemple.
Remplacez la ligne message = mesFormate(nb_select_C,'s'); par var message = mesFormate(nb_select_C,'s');. Cela permettra d'éviter d'éventuels conflits avec d'autres scripts.

Note : Je suis passé de la version 4.5 à la 5.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 variables javascript ont été renommées pour être plus explicites.

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

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

Note Importante pour les utilisateurs débutants ** :

Le plus simple est de prendre le fichier "UploadAjaxABCI_Custom.php" pour avoir une solution complète prête à l'emploi.

Néanmoins pour pouvoir faire son propre module d'upload sur mesure, commencez par lire le mode d'emploi et regardez les fonctionnalités de base dans le fichier "UploadAjaxABCI_Basique.php" (cf. commentaires dans le code source des fichiers).

Ensuite se référer au fichier "UploadAjaxABCI.php" qui regroupe d'autres exemples de configuration de la classe et d'utilisation des styles css évènementiels.

Le fichier "UploadAjaxABCI_Custom.php" est un exemple plus élaboré qui reprend les fonctionnalités déjà décrites et donne un exemple d'utilisation des fonctions javascript évènementielles.

Les styles css évènementiels et les fonctions javascript évènementielles sont conçus pour fournir des commandes en fonction du retour des informations en temps réel et donc pour la présentation dynamique du formulaire. Ils ne sont pas indispensables pour l'upload, ni pour les informations de retour qui s'affichent suivant les classes que vous utiliserez (ou non) dans votre html.

Par exemple un élément html ayant la classe "UpAbci_nom" <span class="UpAbci_nom"></span> permettra d'afficher le nom du fichier, tandis que <span class="UpAbci_temps_restant"></span> affichera le temps restant estimé.

A la fin de l'upload du fichier, l'affichage du temps restant ne sera plus utile. Je pourrais le laisser en place à 0 mais si je veux gagner de la place pour afficher d'autres informations ou simplement épurer pour ne garder que les informations utiles, je peux supprimer cet affichage en utilisant le style css évènementiel "data-upabcicss-result" qui sera activé dès la fin de traitement du fichier. Le code html deviendra donc <span class="UpAbci_temps_restant" data-upabcicss-result="display:none"></span>.

Le principe est donc simple, c'est la multitude des possibilités et combinaisons qui rend le code finalement plus compliqué (c'est aussi le principe de la programmation)

Mais vous voyez qu'il y a une grande latitude pour personnaliser l'affichage en modifiant uniquement le html sans avoir besoin de modifier la classe javascript elle-même (ce qui serait vraiment beaucoup plus compliqué voire infaisable pour les débutants)

Dossier complet ici

Bonjour,

La version 4.0 est en ligne ici !...

Grosse mise à jour pour cette nouvelle version

Nouveaux styles css événementiels :
- data-upabcicss-infos-serveur (le serveur a envoyé un message vers .UpAbci_infosServer)
- data-upabcicss-error-img-prev-total (total images supérieur à "config.imgPreviewMaxSizeTotal"
- data-upabcicss-error-img-prev (taille image supérieure à "config.imgPreviewMaxSize"
- data-upabcicss-error-user (erreur d'extension ou de taille autorisée)
- data-upabcicss-remaning-time-compute (s'applique après la durée de config.remainingTimeCompute)

Nouvelles options de configuration :
- filesExtensionsInput (permet de filtrer des extensions différentes en cas d'input file multiples)
- imgPreviewMaxSizeCancelAll (permet d'annuler la prévisualisation de toutes les images si la valeur de config.imgPreviewMaxSize est dépassée pour au moins une image)
- browserOutdeted (comportement de la classe javascript si navigateur obsolète. Remplace le quatrième paramètre optionnel dans l'initialisation de la classe).

Nouvelles fonctions javascript événementielles :
- func_ImgPreviewLoadEach (trigger pour chaque image de prévisualisation disponible et chargée)
- func_FileSelectAllBefore (trigger pour chaque sélection de fichiers avant l'affichage des informations)
- func_FileSelectEach (trigger pour chaque fichier après l'affichage de ses informations)
- func_FileInProgressEach (trigger durant la progression du téléchargement de chaque fichier)
- func_FileEndEach (trigger à la fin du téléchargement de chaque fichier)

Toutes les fonctions javascript ont maintenant un accès direct aux paramètres et objets de la classe.
Cela permet une meilleure interaction avec des scripts externes, et de modifier directement des objets html d'informations sans avoir besoin de parser le DOM.

A cette occasion je donne deux exemples de crop multiples (fonctionnels) qui utilisent les fonctions événementielles en relation avec le module "jquery imgAreaSelect"

L'exemple "custom" a également été amélioré

Cette version n'est pas compatible avec les précédentes, tous les paramètres et fonctions on été renommés (c'était nécessaire). Je laisse la V3.0c en ligne encore quelques temps car c'est la dernière version compatible avec les précédentes.

En complément des nouvelles fonctionnalités, la version 4.0 apporte quelques petites améliorations et corrections :
Amélioration :
Toutes versions : en cas de contrôle de l'extension ou de la taille des fichiers, l'affichage de l'erreur est maintenant immédiate.
Apparavant les fichiers n'étaient pas soumis mais il fallait appuyer sur le bouton d'envoi pour voir s'afficher le message correspondant.

Corrections :
- Version 3.0c uniquement : les boutons de sélection de fichiers ne se mettaient plus en disable lors de la soumission du formulaire comme dans les versions précédentes. Ce problème n'affectait pas les boutons files customisés qui fonctionnaient comme prévu. Corrigé.
- Toutes versions : en cas de champs de type file multiples, le status arrêt d'un fichier provenant d'un premier champ était annulé si on re sélectionnait des fichiers depuis un autre champ. Corrigé.

Le mode d'emploi a été mis à jour

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"

Don't be afraid
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.

Bonjour,

La version 6.6 est disponible

1/ Modification des classes optionnelles de traitement d'images dans les fichiers :
- CropRedim.php
- RedimImage.php
Corrige le bug retourné par la fonction native imagecreatefromjpeg - détail ici - sur des photos non entièrement conformes au standard en provenance de certains appareils photo numériques (typiquement selfies Samsung), ce qui rendait impossible les redimensionnements et recadrages sur ces images.

2/ Amélioration de l'affichage du mode d'emploi pour une meilleure stabilité au chargement de la page (auparavant les blocs prenaient souvent une fraction de seconde pour se positionner correctement), et quelques améliorations mineures dans les css de certains fichiers d'exemples.

Voilà