Upload de fichiers Ajax/Php

Fonctionnalités, installation

Fonctionnalités

Installation

Conseils d'utilisation

Sécurité et validité des fichiers

Principe d'affichage des informations

1/ Classes CSS prédéfinies

2/ Styles CSS événementiels

3/ Fonctions Javascript événementielles

Fichiers d'exemples

Fichiers d'exemples compatibles avec les navigateurs "récents" IE >= 10

Configuration côté formulaire

2/ Ajout de champs de saisie utilisateur

Classes prédéfinies

Ces classes prédéfinies servent uniquement à l'affichage des informations, elles sont sans incidence sur fonctionnement interne de l'upload. Elles doivent se situer à l'intérieur du formulaire ou du conteneur des résultats, déclarés respectivement en deuxième et troisième paramètre dans l'initialisation de la classe Javascript.

1/ Classes à définir sur des blocs html non spécifiques à chaque fichier

2/ Informations spécifiques à chaque fichier

Important : Les classes ci-dessous doivent être inclues dans le bloc html ayant la classe UpAbci_infosFile.
Vous pouvez écrire des valeurs par défaut dans vos éléments html d'information (ex : 0 Mo), elles seront remplacées automatiquement en temps voulu.

- Les valeurs par défaut des éléments utilisant les classes UpAbci_progressionT, UpAbci_backup et UpAbci_remainingTime sont restituées quand l'upload est terminé.

- Les valeurs par défaut sont aussi analysées pour déterminer l'éventuel espacement à appliquer entre la valeur numérique et son unité correspondante. Si non renseignée ou si les premiers caractères ne sont pas numériques, l'espacement utilisé est celui de la configuration javascript info.unitsSpacing soit " " par défaut.

*** Une méthode php getInputInfosFileUnic() est disponible pour récupérer la valeur de ces inputs côté serveur.

Il n'y a pas de nécessité d'attribuer la classe "UpAbci_inputInfosFileUnic" pour un champ de type text "standard" tant que le comportement du formulaire ne dépend pas de son type. Mais c'est le cas d'un bouton de type radio par exemple, voir note ci-dessus.

Styles événementiels

1/ Styles applicables sur les blocs passés en paramètre dans l'initialisation de la classe Javascript

Les blocs sur lesquels pourront être appliqués ces styles événementiels par l'intermédiaire d'un attribut data-upabcicss-*, correspondent respectivement au bloc contenant le formulaire (avec le champ de type file) et au bloc contenant l'information des résultats de l'upload ainsi qu'à tous leurs éléments contenus. Le bloc des résultats n'étant pas nécessairement inclus dans le bloc du formulaire.

2/ Styles applicables localement

Les styles ci-dessous ont des portées spécifiques car ils sont relatifs au traitement des fichiers. Ils sont bien entendu appliquables sur tous les blocs contenus dans le bloc d'information des fichiers défini avec la classe UpAbci_infosFile ainsi que sur ce bloc lui-même.

Cependant, pour faciliter la programmation dans certains contextes, ils peuvent également être appliqués sur le bloc conteneur des résultats lui-même (troisième paramètre dans l'initialisation de la classe Javascript) et sur le bloc éventuellement défini avec la classe UpAbci_infosServer lui-même (mais pas sur ses éléments contenus).
Notez que les éléments html inclus dans le conteneur des résultats mais exclus du bloc ayant la classe UpAbci_infosFile ne seront pas ciblés par les styles ci-dessous (excepté le bloc "UpAbci_infosServer" s'il est défini).

3/ Ordre d'application des styles *

4/ Condition d'application des styles

5/ Styles configurables en Javascript

En complément de ces styles événementiels qui sont à utiliser dans le html avec l'attribut "data-upabcicss-*", vous disposez en complément des options de configuration Javascript config.cssSubmitOn et config.cssFileSelectOn (voir plus bas) pour formater les boutons d'envoi du formulaire et les boutons de sélection des fichiers durant l'upload. L'upload terminé, les boutons retrouvent leur état initial.

Configuration de la classe Javascript UploadAjaxABCI

Notez que cette classe utilise jQuery qui doit être chargé avant le fichier UploadAjaxABCI.js.

Trois paramètres sont attendus dans l'instanciation de la classe. Les deux premiers sont obligatoires, le troisième est optionnel mais indispensable pour l'affichage du retour des informations.

Exemple avec la configuration de deux options de configuration javascript :

// Initialisation
var up = new UploadAjaxABCI('Php_Upload/upload.php', '#form', '.infos_form');

// Modification du retour du status ok (par défaut = 'Téléchargement ok')
up.info.status.ok = 'ok';

// Configuration d'un bouton personnalisé de sélection des fichiers (par défaut = non défini)
up.config.customFileSelect = ".bouton_fichiers";

// Pour terminer, utilisez la méthode Start() pour lancer le script, DOM chargé
$(function(){up.Start()});

Note : Pour les navigateurs incompatibles (IE < 10), le comportement peut être paramétré avec l'option config.browserOutdeted. Voir également la méthode événementielle config.func_BrowserOutdeted qui peut être exécutée dans ce cas de figure.

Options de configuration Javascript

Liste des propriétés configurables

Syntaxe des paramètres Javascript

Fonctions Javascript événementielles

Contenu des objets spécifiques à chaque fichier passés en paramètre dans les fonctions événementielles

Ajout d'informations spécifiques à chaque fichier

Fonctions et librairies Javascript annexes

Les scripts ci-dessous, utilisés dans certains exemples, sont indépendants et se trouvent dans le dossier Javascript :

Code Javascript complémentaire

Configuration côté serveur Php >= 5.6

(Consultez le paragraphe Interactions Javascript/Serveur si vous souhaitez utiliser une autre technologie serveur que Php)

Configuration de la classe Php UploadAjaxABCIServeur

Note : L'adresse des dossiers passés en paramètre doit comporter un séparateur final, ex:

$dossier = '../Destination/';

Configuration avec un tableau (recommandé)

Pour plus de souplesse et de lisibilité, vous pouvez configurer la classe avec un tableau en reprenant les mêmes index que les variables ci-dessus. Par exemple pour configurer le dossier de destination, les extensions autorisées et la taille maximale:

$config = [
'dossier_destination' => '../mon_dossier/',
'extensions' => ['mp4', 'divx', 'flv', 'mkv'],
'max_size' => '500 Mo'
];
$up = new UploadAjaxABCIServeur($config);

Valeurs par défaut

Pour faciliter l'utilisation de la classe et pouvoir accéder à ces paramètres de configuration dans d'autres contextes - par exemple la durée de vie du cookie et l'adresse du dossier temporaire sont également utilisés dans la classe "NettoyageTemp" pour définir les valeurs par défaut - tous les paramètres de cette classe serveur ont des valeurs par défaut définies dans la méthode getParamUploadAjaxABCIServeur du trait ParamsDefautServeur, cf. fichier "Classes/ParamsDefautServeur.php".

Les paramètres que vous passez dans l'initialisation de la classe UploadAjaxABCIServeur seront pris en compte s'ils sont strictement différents de la constante null, c'est à dire qu'une valeur renseignée et vide comme '' sera prise en compte si compatible avec le paramètre. Sinon, les paramètres définis dans ParamsDefautServeur seront utilisés.

Dans les exemples, je définis toujours le dossier de destination pour plus de clarté.

Récupération des champs du formulaire

Récupération des paramètres prédéfinis de la requête Ajax

Liste des paramètres spécifiques envoyés par la requête Ajax :

NOTE si vous souhaitez utiliser un autre langage serveur que PHP : les noms des variables Php ci-dessous correspondent aux noms des variables envoyées par la classe Javascript.

$UpAbci_form

Tableau de données. Il est renseigné dans tous les cas, excepté pour la requête complémentaire de confirmation de fin de traitement du formulaire qui est envoyée si et uniquement si l'option de configuration Javascript config.queryFormEnd = true. Dans ce cas et uniquement pour cette requête additionnelle, le tableau sera vide et vous pourrez récupérer les informations depuis "$UpAbci_formEnd" détaillé ci-dessous.

$UpAbci_formEnd

Uniquement disponible à la fin du traitement du formulaire si l'option de configuration Javascript config.queryFormEnd = true. Retourne un tableau de tableaux d'informations, 1 pour chaque fichier, avec le même contenu que $UpAbci_form. Si aucun fichier n'est joint, le tableau renverra seulement les trois index "id_form", "uniqid_form" et "iteration_form".
Si l'option Javascript n'a pas été configurée ou si ce n'est pas la fin du traitement du formulaire $UpAbci_formEnd retourne un tableau vide.

$UpAbci_inputsInfosFile

Tableau qui permet de récupérer la valeur des champs spécifiques à chaque fichier dans l'éventuelle requête additionnelle si l'option de configuration Javascript config.queryFormEnd = true. En dehors de la requête additionnelle, ces champs sont dans la super globale $_POST et la variable UpAbci_inputsInfosFile n'est pas définie.

$UpAbci_joinFile

Uniquement disponible si vous avez ajouté la propriété "join_file" aux objets passés en paramètre dans les fonctions événementielles. Permet de récupérer des informations spécifiques à chaque fichier, ajoutées en javascript lors de l'upload.

$UpAbci_blobSlice

Renvoie "1" si le fichier est en plusieurs morceaux.

$UpAbci_fileEnd

Renvoie "1" si c'est la fin du fichier (dernière ou unique partie).

$UpAbci_fragment

Le fragment de ficher correspondant à $_FILES['UpAbci_fragment']
OU
La valeur 1 correspondant à $_POST['UpAbci_fragment'] si une sauvegarde complète est trouvée lors de la sélection du fichier et dans ce cas $_FILES['UpAbci_fragment'] n'est pas définie.

Liste des index des tableaux $UpAbci_form et $UpAbci_formEnd :

(1) "result" est le résultat final renseigné en Javascript au retour de la requête Ajax. Sa valeur sera donc toujours 0_0 côté serveur excepté pour la dernière requête si vous configurez l'option config.queryFormEnd = true pour envoyer une requête additionnelle en fin de traitement du formulaire.

(2) Pour information, les tableaux $UpAbci_form et $UpAbci_formEnd ne contiennent pas initialement ces index. La classe serveur les ajoute automatiquement dans ces tableaux à réception de la requête Ajax pour pouvoir récupérer toutes les informations utiles en listant simplement ces tableaux.

- La méthode getParam ($index) de la classe d'upload Php retourne les valeurs du tableau $UpAbci_form, sinon (si ce tableau est vide) retourne éventuellement les valeurs de $UpAbci_formEnd[0] pour les index "id_form", "uniqid_form" et "iteration_form".
Exemple :

$name = $up->getParam('name'); // retourne le nom du fichier ou false si l'index n'existe pas

- Aucune fonction n'est fournie pour récupérer les valeurs de $UpAbci_formEnd (autres que "id_form", "uniqid_form" et "iteration_form") car c'est un tableau de tableaux, un par fichier. Faites une boucle sur ce tableau pour lister les différents fichiers et récupérer les informations associées aux index.

foreach($up->UpAbci_formEnd as $file) {
// Si le fichier est correctement uploadé
if($file['result'] == "ok_done") {
//...
}}

- Si vous avez utilisé la méthode $.param() côté javascript pour renseigner la propriété join_file spécifique à chaque fichier par l'intermédiaire d'une fonction javascript événementielle, vous pouvez utiliser la fonction php parse_str() pour récupérer les données dans un tableau, par exemple :

$tab_join_file = [];
parse_str($up->getParam('join_file'),$tab_join_file);

Les données sont maintenant dans le tableau $tab_join_file.

Méthodes de la classe UploadAjaxABCIServeur

Ces méthodes de la classe Php sont utilisées et commentées dans le code source des fichiers d'exemples : UploadAjaxABCI_Upload_....php.

La classe UploadAjaxABCIServeur utilise le trait ParamsDefautServeur qui définit la configration par défaut, ainsi que le trait de services UploadABCITraitServices qui regroupe des fonctions souvent utilisées dans les scripts d'upload. La classe UploadABCIServices utilise ce même trait de services afin d'exploiter plus facilement ces fonctions dans les scripts de formulaires côté client.

L'ordre d'application de ces méthodes est important. Si vous utilisez des fonctions nécessitant l'existence d'un fichier, assurez-vous de sa présence avec la méthode getFragment(). Cependant, certaines méthodes usuelles comme Upload() et Transfert() font automatiquement ce contrôle.

Retours d'informations serveur

Gestion des messages

Tous les messages utilisés par les scripts et les classes php sont centralisés sous forme de tableaux dans la classe Messages, voir le fichier "Classes/Messages.php". La classe SetMessages qui hérite de cette classe, construit un tableau des messages nécessaires en compilant certains de ces tableaux suivant les besoins des classes php utilisées.

1/ Vous pouvez ajouter des tableaux personnalisés inclus dans la classe Messages, en complément de ceux qui sont automatiquement chargés, en intanciant la classe SetMessages dans vos scripts d'upload :

// Ajoutera les tableaux de messages retournés par les propriétés 'inscription' et 'verifFileExist' de la classe 'Messages'.
new SetMessages('inscription', 'verifFileExist');

Notez qu'en cas de conflit, les index déjà existants ne seront pas remplacés.

- Pour des besoins spécifiques, utilisation de "setMessages" en dehors du contexte d'un upload :
L'argument réservé nommé "notIni" sert à éviter que le tableau "$communs" - qui regroupe les messages les plus communs utilisés dans les scripts d'upload - soit chargé automatiquement lors de l'instanciation de "SetMessages".

new SetMessages('inscription', 'verifFileExist', 'notIni');

2/ Comme montré en exemple dans les scripts serveur, la classe SetMessages propose une méthode get pour récupérer les messages :

/* Récupère le message ayant l'index 'UpAbExtensionFichier' enregistré dans la classe
"Messages" qui signale une erreur d'extension de fichiers, et le fait afficher comme
erreur dans le status du fichier avec exitStatusErreur (cf. chapitre précédent) */

$up->exitStatusErreur (SetMessages::get('UpAbExtensionFichier'));

3/ La méthode surchargeMessages($tab) permet d'ajouter ou de surcharger les messages du tableau créé par SetMessages. C'est pratique pour proposer des traductions ou des messages simplifiés pour les visiteurs qui n'ont pas besoin de messages détaillés (dont certains sont utilisés pour faciliter le debug), tout en préservant les autres messages de la classe Messages.

Notez qu'en utilisant cette méthode, les index déjà existants seront remplacés.

Par exemple, ci-dessous "$traduct_messages" qui est un tableau de messages traduits en fonction de la langue du visiteur avec ici 7 messages qui me permettront de gérer un téléchargement de fichiers, avec redimensionnement et sauvegarde du fichier original si le fichier est une image, ainsi qu'un contrôle des champs requis :

/* Je construis avec $tab_trad, un tableau de messages existants dans la classe "Messages"
dont les valeurs sont à remplacer*/

$tab_trad = [];
foreach ($traduct_messages as $index => $value)
{
switch ($index)
{
case "connexion_perdue" :
$tab_trad['UpAbVerifToken'] = $value;
break;

case "file_exced_max_serveur" :
$tab_trad['UpAbMaxSizeFichier'] = $value;
$tab_trad['UpAbAllowedMemorySize'] = $value;
$tab_trad['UpAbMaximumExecutionTime'] = $value;
break;

case "file_ext_novalid" :
$tab_trad['UpAbExtensionFichier'] = $value;
break;

case "Image_non_valide" :
$tab_trad['UpAbImageNonValide'] = $value;
break;

case "pb_traitement_fichier" :
$tab_trad['UpAbConfigChmod'] = $value;
$tab_trad['UpAbCopieFichier'] = $value;
$tab_trad['UpAbServerFichierTemp'] = $value;
$tab_trad['UpAbServerVerifFile'] = $value;
break;

case "pb_traitement_image" :
$tab_trad['UpAbImageCorrectionExifJpg'] = $value;
$tab_trad['UpAbImageCreationSource'] = $value;
$tab_trad['UpAbImageCreationDestination'] = $value;
$tab_trad['UpAbImageRedimension'] = $value;
$tab_trad['UpAbImageEnregistrement'] = $value;
break;

/* Ajoute ici un message avec un index 'formIncomplet' non existant
dans les différents tableaux de la classe "Messages"*/

case "formulaire_incomplet" :
$tab_trad['formIncomplet'] = $value;
break;
}
}

//On utilise ensuite la méthode "surchargeMessages" pour ajouter ce tableau dans "SetMessages"
SetMessages::surchargeMessages ($tab_trad);

En cas de problème dans le traitement d'une image, les messages indexés avec 'UpAbImageCorrectionExifJpg', ..., 'UpAbImageEnregistrement' utilisés éventuellement en cas de bug par les fonctions de traitement d'images, renverront la valeur de l'élément "pb_traitement_image" du tableau de traduction "$traduct_messages".

Par ailleurs, si un champ requis est manquant dans le formulaire, je pourrai récupérer le message avec la méthode get de SetMessages, et si je veux le faire afficher dans le bloc html ayant la classe UpAbci_infosServer :

$up->addInfosServer (SetMessages::get('formIncomplet'));

Important : Les messages ajoutés avec surchargeMessages sont protégés et ne seront donc pas remplacés par les classes qui seront appelées dans la suite du script et qui initialisent automatiquement des messages. Vous devez donc utiliser cette méthode en haut de votre script php d'upload, avant toute utilisation de la méthode get de SetMessages et d'initialiser la classe d'upload ou d'utiliser d'autres classes (de redimensionnement ou de crop par exemple) qui l'utilisent en interne, afin que vos messages personnalisés soient utilisés prioritairement.

Ce principe vous permet de garder une bonne maitrise de la gestion des erreurs. Au pire, si vous avez homis de traduire un message qui a besoin d'être affiché, il sera non traduit mais néanmoins affiché avec la valeur initiale contenue dans la classe Messages.

- Pour des besoins spécifiques, utilisation de "setMessages" en dehors du contexte d'un upload :
Un second paramètre optionnel, si = false : SetMessages::surchargeMessages ($tab_trad, false), sert à éviter que le tableau "$communs" - qui regroupe les messages les plus communs utilisés dans les scripts d'upload - soit chargé automatiquement par la méthode "surchargeMessages".

Upload sans Transfert(), fichier temporaire

1/ Dans certains cas, vous n'aurez pas besoin d'utiliser la méthode Transfert() qui déplace le fichier temporaire vers son emplcement définitif. Par exemple le fichier uploadé peut être exploité sans nécessairement avoir besoin d'être sauvegardé, ou lorsque vous utilisez la classe ImgGD qui possède sa propre méthode "export()" pour créer et exporter des fichiers images. La méthode Transfert() effectue en interne les tâches suivantes, la première étant indispensable pour une bonne continuité du script côté client :

• Enregistrement de l'état du fichier en cours pour le retour Ajax et les informations HTML
• Effacement du cookie de sauvegarde du fichier en cours
• Transfert du fichier temporaire vers son emplacement définitif (voir fin de ce paragraphe).

Si donc vous n'utilisez pas la méthode Transfert(), vous devez utiliser les méthodes setTransfertOk() (renvoie le status "ok" qui sera utilisé par la classe javascript) et deleteFileTempCookie() (supprime le fichier temporaire et le cookie de sauvegarde), pour faire les tâches équivalentes, ou par facilité, la méthode SetTransfertOkDelFileTempCookie() qui regroupe ces deux méthodes souvent utilisées conjointement.

Notez que si vous n'utilisez pas la méthode deleteFileTempCookie(), le visiteur retrouvera la sauvegarde dès la prochaine sélection de son fichier. Cela peut être une solution pour préserver l'upload d'un fichier en attente d'informations complémentaires (si besoin on peut avoir une sauvegarde pour tous les fichiers en utilisant la méthode "saveAll"). Vous pourriez alternativement utiliser la méthode deleteCookieSave() pour supprimer le cookie de sauvegarde tout en préservant le fichier temporaire dans des cas particuliers. Tout dépend de vos besoins, mais renseignez au minimum le status du fichier pour une bonne continuité du script javascript.

Si vous n'utilisez pas la méthode "Transfert()" et que vous ne renseignez pas le status du fichier avec la méthode "setTransfertOk()", la classe d'upload javascript renverra le message "Echec du traitement", même si le traitement php s'est effectué correctement. Vois l'exemple ci-dessous pour différents cas de figure.

2/ Le dossier temporaire "Upload_Temp" est utilisé pour compiler les fichiers dont la taille est supérieure à celle des fragments (définie côté client dans le formulaire et transmise à la classe php dans la requête ajax). A noter qu'il est également utilisé systématiquement quelque soit la taille des fichiers pour stocker les fichiers en attente de transfert si vous utilisez la méthode "saveAll()", ou si vous ne désactivez pas le contrôle du type MIME qui est activé par défaut.

En cas de panne internet durant l'upload d'un gros fichier, ou si le visiteur arrête l'upload d'un fichier durant son transfert et ne le reprend pas par la suite, vous aurez des fragments de fichiers inutiles dans ce répertoire, de même que dans l'exemple ci-dessus si vous n'utilisez pas la méthode "Tranfert()" ni la méthode "deleteFileTempCookie()". Voir le chapitre Technique d'upload, maintenance qui propose deux méthodes de nettoyage. La fonction NettoyageTemp::interval(); est intégrée dans tous les scripts côté formulaire depuis la version 7.6b.

Classes Php disponibles

Les classes sont situées dans le dossier "Php_Upload/Classes" et documentées dans le code source des fichiers. Elles sont chargées dans les fichiers d'exemples avec "spl_autoload_register".

- Les classes UploadAjaxABCIServeur, UploadFormABCIServeur et UploadABCIServices utilisent le trait UploadABCITraitServices.

- Les classes UploadAjaxABCIServeur, NettoyageTemp et C_PDO utilisent le trait ParamsDefautServeur.

- La classe SetMessages hérite de la classe Messages et est utilisée un peu partout dans les scripts d'exemples et dans les classes elles-mêmes. Notez qu'elle propose une méthode surchargeMessages qui permet de personnaliser/traduire ou ajouter des messages depuis vos scripts d'upload sans modifier la classe Messages. Voir le paragraphe précédent.

- Les classes ImgGD, CorrectionExifJpg, et C_PDO peuvent émettre des exceptions, aussi vous devez les utiliser dans un bloc try/catch (cf. fichiers d'exemples code serveur dans le dossier "Php_Upload").

Note : Les classes "CropRedim" et "RedimImage" ne sont plus utilisées depuis la version 8.0 de ce module d'upload, excepté dans les exemples de code pour navigateurs obsolètes. Elles ont été remplacées par la classe ImgGD beaucoup plus conviviale avec plus de possibilités, mais elles ont néanmoins été mises à jour pour php 8.0 et sont conservées dans le répertoire "Php_Upolad/Classes" pour que les utilisateurs de ces anciennes classes puisse facilement mettre leur code à jour. N'utilisez plus ces fonctions pour vos prochains développements car elles ne seront plus maintenues et sont par ailleurs beaucoup plus complexe à paramétrer.

Traitement des images, classe ImgGD

Note : L'initialisation de la classe et les méthodes peuvent renvoyer des erreurs. Il est donc important de les utiliser dans une structure try/catch.

Gestion des erreurs fatales du serveur

Voir exemple d'application dans le fichier "UploadAjaxABCI_Upload_Traitements_Images.php".

Les messages d'erreurs seront concaténés au message configuré dans la classe Javascript avec info.status.errorServer.

Si aucune des deux méthodes catchErrorServer() ou setModeDebug() n'est utilisée, les erreurs fatales ne seront pas transmises et seul le message Javascript défini avec info.status.errorServer s'affichera. Par exemple, les erreurs lors des redimensionnements d'images proviennent la plupart du temps d'un dépassement des configurations serveur "memory_limit" et/ou "max_execution_time".
Les messages textuels renvoyés par le serveur commencent respectivement par :
'Allowed memory size ...' et 'Maximum execution time ...'.

On peut donc gérer ces erreurs avec le tableau suivant :

$tab_erreurs = array();

// le cookie et le fichier de sauvegarde seront supprimés
$tab_erreurs['Allowed memory size'] = ["Mémoire insuffisante, le fichier est trop gros pour être redimensionné.",true];

// le cookie et le fichier de sauvegarde seront préservés
$tab_erreurs['Maximum execution time'] = "Le temps d'exécution maximum du script est dépassé, rechargez votre image et réessayez !";

$up->catchErrorServer($tab_erreurs);

Vous pouvez bien entendu compléter le tableau d'erreurs par autant de lignes que vous voulez.

Pour l'exemple ci-dessus je fais l'hypothèse (pas forcément juste) que si une erreur mémoire se produit lors du redimensionnement, il est inutile de réessayer donc je peux effacer le fichier temporaire et l'éventuel cookie enregistrant les coordonnées de la sauvegarde. Cela permet si besoin d'optimiser le nettoyage du dossier temporaire.
Par contre le dépassement de "max_execution_time" peut être dû à un serveur momentanément surchargé. On a donc peut-être intérêt de conserver le fichier éventuellement sauvegardé pour une nouvelle tentative. Cela permettra de le réutiliser directement lors de la prochaine sélection du fichier sans avoir besoin d'attendre pour son téléchargement.

Concernant les index du tableau, la fonction fait une recherche des mots constituant cet index dans le corps du message d'erreur renvoyé par le serveur avec "strpos($erreur_serveur,$index) !== false".
Vous devez donc rentrez une suite de mots génériques qui correspond au texte de cette erreur, suffisamment pour bien cibler l'erreur mais pas trop pour éviter les variables !

Je n'ai pas trouvé d'autre solution car la fonction "error_get_last()" de Php qui permet d'attraper les erreurs fatales ne renvoie aucun index correspondant à l'erreur (sinon le type qui est trop imprécis), mais simplement le texte de l'erreur. Il en résulte que si le message d'erreur Php venait à changer, l'erreur ne serait plus gérée par la méthode catchErrorServer(). Cependant l'expérience montre que ces messages d'erreur n'évoluent quasiment jamais au fil des versions Php. Et si c'était le cas, les conséquences seraient très limitées car l'erreur sera néanmoins interceptée. Simplement aucun message correspondant ne serait trouvé et seul le message configuré en Javascript par info.status.errorServer s'afficherait. L'information visiteur serait donc seulement moins précise, mais ce serait sans incidence sur la confidentialité ou la sécurité du script.

Note : la gestion des erreurs est surtout utile pour le debug avec setModeDebug() lors de la configuration du script Php, ou pour personnaliser les éventuels retours d'erreurs lors d'un traitement complémentaire à l'upload (ex: travail sur les images) avec catchErrorServer().
Concernant l'upload lui-même, les erreurs serveur spécifiques à l'upload des fichiers sont gérées automatiquement par la classe d'upload.

La "seule" erreur possible restante est une perte de connexion (souvent après plusieurs heures d'upload en continu sur un serveur mutualisé). Dans ce cas la vérification du token échouera et vous devriez avoir le message d'erreur associé soit actuellement dans mes exemples :

"Connexion non valide ou perdue. Rafraîchissez la page et recharger votre fichier, si celui-ci dispose d'une sauvegarde automatique elle sera utilisée".

Visibilité des fichiers uploadés

En complément de la configuration des droits d'accès des dossiers, variable suivant les hébergeurs, certains hébergements (notamment OVH mutualisés) nécessitent d'attribuer des droits d'accès aux fichiers lors de l'upload pour autoriser leur accès depuis une adresse web.
Utilisez si nécessaire la méthode setChmod() pour définir les droits d'accès.

Des exemples dans les fichiers d'upload serveur attribuent des droits 0604. Cela peut varier suivant votre serveur (hébergeur) donc vérifier l'accès des fichiers en production sur le serveur distant pour être certain de la bonne configuration.

Classe d'upload pour navigateurs obsolètes

La classe UploadFormABCIServeur peut être utilisée pour les navigateurs obsolètes.

Note: Cette classe est compatible php 8.0 mais elle ne sera plus maintenue, de même que les exemples de forumlaires correspondants. Les navigateurs obsolètes inférieurs à IE10 pour lesquels ils ont été initialement concus ayant disparus du paysage informatique.

Côté javascript si l'option de configuration config.browserOutdeted est définie à null, le script de la classe javascript ne sera pas exécuté pour les navigateurs obsolètes - excepté celui éventuellement défini par la méthode événementielle config.func_BrowserOutdeted() - et le formulaire sera envoyé à l'adresse définie dans l'attribut "action" du formulaire.

Cela donne une solution de secours pour les navigateurs obsolètes, sans les fonctionnalités de la classe javascript (infos temps réel, fragmentation, prévisualisations des images...) mais permettant néanmoins un upload classique 100% php.

Des exemples d'utilisation de cette classe sont donnés dans les fichiers :

• UploadAjaxABCI_Basique_CompNavObs.php
• UploadAjaxABCI_Redimensions_CompNavObs.php
• UploadAjaxABCI_Inscription_Photo_CompNavObs.php

Configuration de la classe "UploadFormABCIServeur"

(pour navigateurs obsolètes)
Notes :
(1) Non utilisé par l'upload lui-même mais sert d'ancre de redirection pour l'affichage des résultats.

(2) Non utilisé par l'upload lui-même mais sert pour définir la propriété "destination" de l'objet contenant les informations sur le fichier. L'adresse du dossier passé en paramètre doit comporter un séparateur final, ex: $dossier = 'Destination_Upload2/';

(3) Voir le fichier "UploadAjaxABCI_Redimensions_CompNavObs.php" pour un exemple d'utilisation.
Permet dans le cas d'un traitement serveur complémentaire à l'upload (ex: redimensionnement d'images) et lors d'un upload multiple, de traiter les fichiers par ordre de taille croissante. Ainsi si une erreur fatale survient, tous les fichiers susceptibles de pouvoir être traités le seront avant l'erreur fatale qui terminera l'exécution du script. Utile dans la mesure où le traitement renverra une erreur fatale suivant le poids des fichiers, ce qui est souvent le cas.

(4) Ce message correspond à l'index 'UpAbdefautFatalErrorPhpForm' du tableau "uploadFormServeur" du fichier "Classes/Messages.php".

Fonctions de la classe "UploadFormABCIServeur"

Contenu de l'objet spécifique à chaque fichier :

Contenu du tableau des résultats :

Ces trois propriétés existent toujours dans le tableau des résultats. Si non renseignées, "Files" retourne un objet tableau vide, et "Error_server" et "Infos_server" valent null.

Mise en production, notes

Tests en local

Externalisation des scripts et des dossiers d'upload

(à l'usage des débutants)

Lors de la mise en production sur un serveur distant, supprimez les formulaires inutiles.

La plupart du temps vous souhaiterez externaliser vos formulaires par rapport au dossier Upload-Ajax-ABCI. Il vous suffira de supprimer tous les fichiers de formulaires - mais pas les dossiers - qui sont à la racine de ce répertoire pour protéger vos scripts. En effet tous les fichiers inclus dans les sous-dossiers du dossier "Upload-Ajax-ABCI" sont protégés par un token ou un .htaccess ou sont inoffensifs, donc seul l'effacement des fichiers des formulaires situés à la racine du dossier "Upload-Ajax-ABCI" est nécessaire.

A/ Externalisation des formulaires

En respectant cette procédure il vous sera facile d'externaliser un formulaire, en changeant simplement les liens vers les fichiers du module d'upload, sans avoir rien d'autre à modifier (excepté éventuellement le nom des dossiers et le nom des fichiers des formulaires comme expliqué plus loin au point B).

Par exemple si l'on choisissait d'utiliser les formulaires
UploadAjaxABCI_Custom_VerifFileExist.php et UploadAjaxABCI_Inscription_Photo_Crop.php
en les plaçant au même niveau que le répertoire Upload-Ajax-ABCI (et non plus à l'intérieur).

1/ UploadAjaxABCI_Custom_VerifFileExist.php devra être modifié en remplaçant les lignes :

par :
2/ UploadAjaxABCI_Inscription_Photo_Crop.php devra être modifié en remplaçant les lignes : par : ce qui aboutirait à une structure finale de ce type :

Vous pouvez renommer le nom des fichiers des formulaires externalisés.

B/ Externalisation des dossiers d'upload

Si maintenant vous souhaitez externaliser les dossiers des fichiers d'upload, rendez-vous dans le dossier Php_Upload et les fichiers de destination Ajax qui chargent les fichiers, soit respectivement pour nos deux fichiers d'exemples :
UploadAjaxABCI_Upload_Custom_VerifFileExist.php
et
UploadAjaxABCI_Upload_Inscription_Photo_Crop.php

1/ Le dossier de destination des fichiers téléchargés avec le formulaire "Custom" sera "Custom_files", en renseignant la variable "$dossier_destination" ainsi :
(actuellement $dossier_destination = '../Destination_Upload1/')

$dossier_destination = '../../Custom_files/';

- A noter que le fichier UploadAjaxABCI_VerifFileExist.php (situé dans le dossier "Php_Upload") qui est nécessaire à la vérification des fichiers existants par le formulaire, comporte également la destination de l'upload. Il conviendra donc de faire la même modification pour la définition de la variable $dossier_destination dans ce fichier (c'est le seul exemple de formulaire dont la destination des dossiers est renseignée dans deux fichiers distincts côté serveur).

2/ Le dossier de destination des fichiers téléchargés avec le formulaire "Inscription" sera "Inscription_files", en renseignant la variable "$dossier_destination" ainsi :
(actuellement $dossier_destination = '../Destination_Upload2/')

Evidemment vous devrez créer les dossiers "Custom_files" et "Inscription_files" (et leur attribuer les droits suffisants).
Après suppression de tous les dossiers et fichiers inutiles, on aura donc la structure suivante :

Vous pouvez renommer le nom des fichiers des formulaires externalisés.

C/ Mode "use strict" pour le code Javascript

(facilite le débugage, facultatif mais recommandé)
Chaque exemple de formulaire déclare le mode "use strict" en haut du code Javascript. Vous pouvez supprimer cette ligne en production ou si vous utiliser du code complémentaire non compatible avec ce mode.

Technique d'upload, maintenance

Nettoyage du dossier des fichiers temporaires

Notes techniques

Détails sur la sauvegarde

Conditions de reprise d'upload

Reprise d'upload impossible

Taille maximale des fichiers

Interactions Javascript/Serveur

A lire plus particulièrement si vous souhaitez utiliser une autre technologie que PHP côté serveur.

Javascript vers Serveur

Se référer au paragraphe récupération des paramètres prédéfinis de la requête ajax.
Les variables UpAbci_blobSlice et UpAbci_fileEnd donnent les indications de traitement au serveur :

a/ Si le fichier est en un seul fragment (UpAbci_blobSlice != 1), le transfère utilise le dossier temporaire du système et la procédure habituelle mais uniquement si la détection du type MIME est désactivée côté serveur, sinon le dossier temporaire de la classe d'upload est utilisé pour lire les informations effectivement enregistrées sur le serveur.

b/ Si le fichier est en plusieurs morceaux (UpAbci_blobSlice == 1) ou si la vérification du type MIME est activée, le fichier ou le fragment de fichier est enregistré dans $dossier_temporaire. Si le fichier n'est pas complet, un cookie est envoyé par Php qui indique le nom unique et sécurisé du fichier temporaire et la taille uploadée. Ce principe permet de surpasser les limites serveur ainsi que de reprendre le téléchargement d'un fichier partiellement enregistré après une interruption totale du système. Ensuite tant que la variable Javascript "UpAbci_fileEnd" est différente de 1 le fichier temporaire est complété, puis exploité quand elle vaut 1.

Serveur vers Javascript

La classe Javascript recherche 6 variables en retour serveur dans un tableau JSON :

Debug

1/ En cas de problème, cliquez sur le lien suivant Test_config.php afin de contrôler les autorisations requises pour lire et écrire dans les dossiers de destination d'upload.
- Toutes les lignes doivent retourner "status ok", sinon attribuer des droits d'accès suffisants aux dossiers avec votre logiciel FTP.
- Les valeurs "post_max_size" et "upload_max_filesize" du serveur sont indiquées pour information. La plus petite de ces valeurs détermine la valeur maximale des fragments.
- Si vous utilisez un serveur de type FAI - exemple sites perso chez Free - consultez le paragraphe n°4.

2/ Une fois le contrôle précédent réussi, si un problème persiste la valeur critique à modifier est la valeur des fragments, soit la variable Php $UpAbci_fragmentSize dans les exemples de formulaires.

En effet, si tous les fichiers d'exemple incluent une vérification des configurations "post_max_size" et "upload_max_filesize" du serveur pour contrôler la valeur maximale des fragments, d'autres paramètres non accessibles depuis Php peuvent intervenir :
Par exemple certains serveurs nginx ont (ou avaient) par défaut une configuration serveur "client_max_body_size" de 1Mo qui va également limiter la taille de l'upload. Dans ce cas particulier, l'upload sera réinitialisé pour chaque fragment envoyé et le script renverra un message d'erreur plus ou moins documenté au bout d'un certain temps. A noter que l'administrateur serveur devrait pouvoir augmenter la valeur de cette configuration sans problème (c'est plus souvent un oubli qu'autre chose).

En cas de problème vous pouvez définir la valeur des fragments à 1Mo, puis augmenter par pas de 1 Mega.

Lors des tests si vous obtenez systématiquement le message d'erreur :

"Connexion non valide ou perdue. Rafraîchissez la page et recharger votre fichier, si celui-ci dispose d'une sauvegarde automatique elle sera utilisée."

Deux erreurs sont possibles :
- Les sessions ne fonctionnent pas (très rare).
- Plus probablement la taille des fragments est supérieure à ce que peut supporter le serveur (1). Appliquez alors une modification de la taille des fragments comme indiqué ci-dessus ou optimisez la configuration de votre serveur.

(1) Si la valeur de "post_max_size" est dépassée alors les super globales $_POST et $_FILES sont nulles. Le jeton de contrôle du formulaire sera invalide puisqu'il transite dans une variable $_POST. D'où le message d'erreur renvoyé par le script Php d'upload. Ce message sera pertinent en production car une fois bien configuré le principal problème possible constaté est une perte de connexion qui peut intervenir après plusieurs heures d'upload en continu sur un serveur mutualisé d'entrée de gamme (probablement une limitation pour économiser des ressources serveur).

3/ Si, sans raison apparente, vous obtenez le message :

"Reprise d'upload impossible. La sauvegarde n'est pas valide. Recharger votre fichier."

ou

"Erreurs dans la vérification de l'intégrité du fichier."

ou un message inapproprié de dépassement de la taille du fichier, il est possible que vous ayez téléchargé le même gros fichier depuis le même formulaire dans des onglets différents, voir ce paragraphe. Alternativement, cette erreur peut parfois se produire en cas de reprise d'upolad suite à l'arrêt volontaire d'un fichier en cours d'upload (avec le bouton stop), ou suite à une panne internet, voir ce paragraphe.

4/ Serveurs sites perso des fournisseurs d'accès internet, exemple avec Free :
Contrairement aux serveurs mutualisés des hébergeurs professionnels (ovh, gandi...), les hébergeurs gratuits ont souvent des limitations sur le traitement des fichiers qui vont au delà des configurations "post_max_size" et "upload_max_filesize". Par exemple toutes les fonctions de traitement sur les fichiers (file_get_contents, fopen...) sont limitées à 2Mo chez Free (fin 2016). De sorte que même si techniquement la classe d'upload javascript pourra fragmenter les fichiers à une valeur inférieure, le code php ne pourra pas compiler et reconstruire les fichiers s'ils dépassent cette limite.

Notez que cette limitation sur la taille des fichiers est normalement la seule que vous aurez sur ce type de serveur. Toutes les autres fonctionnalités sont préservées, notamment : informations en temps réel, redimensionnements, recadrage, et pas de limitation concernant le nombre de fichiers.

Exemple de configuration sur serveur Free - nécessite d'utiliser au minimum la version php 5.6 disponible depuis l'été 2016 :

Code php qui alimente le formulaire:

Configuration de la classe javascript :
Ajoutez une ligne pour limiter la taille des fichiers légèrement en dessous de 2Mo
Pour le reste des configurations, options et possibilités, vous pouvez prendre modèle sur tous les exemples fournis.

5/ Affichage des vignettes de prévisualisation des images :
IE 10 ne supporte pas la prévisualisation des images de type png.

6/ Tests de très gros fichiers avec la console du navigateur ouverte :
Le téléchargement de gros fichiers nécessite de nombreuses requêtes (en fonction de la configuration de la taille des fragments). Après de nombreux tests et si vous avez par exemple 4 Mo de mémoire vive sur sotre système, l'enregistrement des requêtes par la console peut saturer votre mémoire. Dans ce cas, le téléchargement s'arrêtera et reverra un message d'erreur non documenté. Parfois le navigateur vous prévient qu'il sature la mémoire, mais pas toujours en temps voulu. Fermez la console du navigateur.

7/ Lenteur pour l'upload des très gros fichiers :
Configurez la taille des fragments au maximum de la capacité de votre serveur pour réduire le nombre de requêtes si votre formulaire est destiné à l'upload de très gros fichiers.
Accessoirement, vous pouvez aussi diminuer la valeur de la configuration javascript config.ajaxTimeOut en ayant lu les précautions d'usage (mais cela n'aura qu'un impact très limité).

8/ Bug récurrent sur l'upload des petits ou gros fichiers :
Dans de rares cas, certains serveurs d'évaluation ou configurations locales provoquent des bugs. Si vous constatez un bug non répertorié dans les points précédents, commencez par tester le script sur un serveur distant professionnel (type Ovh, Gandi, etc.) pour être certain que l'erreur ne provient pas de votre configuration locale.
Ces bugs ont parfois été rapportés lors de l'utilisation de serveurs portables (clé USB) ou dans le contexte d'utilisation d'un framework mais ce problème disparaît en condition d'utilisation réelle sur un serveur distant.

Si le bug apparait uniquement pour l'upload de gros fichiers, il est possible que le cookie envoyé par Php ne puisse pas être récupéré par Javascript. Vérifiez la configuration du cookie dans le fichier Php ParamsDefautServeur ou dans l'initialisation de la classe serveur Php.

Forum de discussion, liens

Lien de téléchargement du module d'upload

Forum de discussion

imgareaselect Plugin jQuery de Crop - Recadrage

exif-js Librairie pour lire les informations EXIF d'une photo "jpg" ou "tiff" provenant d'un appareil photo numérique.

Tutoriel

Pour information, ce tutoriel est également disponible en ligne ici.

La configuration de l'affichage des informations et du comportement du formulaire est réalisée directement dans le code HTML avec des classes prédéfinies et des styles événementiels. Ce module d'upload peut donc être utilisé par des débutants sans connaissances en JavaScript tout en bénéficiant des fonctionnalités intégrées.

Pour aller plus loin, des fonctions JavaScript événementielles (callback) sont disponibles pour permettre d'exécuter du code JavaScript personnalisé en fonction des différentes étapes de traitement des fichiers.

Parallèlement à la lecture de ce tutoriel, vous pouvez consulter le mode d'emploi pour des informations plus exhaustives. Dans un premier temps, je conseille cependant, notamment pour les débutants, de se référer principalement à l'exemple ci-dessous pour éviter de se sentir submergé par toutes les options disponibles. Vous constaterez que l'on peut configurer un upload disposant de nombreuses fonctionnalités avec un minimum de paramétrages faciles à mettre en place.

Cet exemple est basé sur le formulaire UploadAjaxABCI_Basique.php et sur son script serveur UploadAjaxABCI_Upload_Basique.php fournis dans le dossier en téléchargement.

Configuration du formulaire

Le formulaire doit posséder un identifiant html, "id" ou "class", qui sera passé en second paramètre lors de l'initialisation de la classe JavaScript. Alternativement ce paramètre peut être un objet jQuery.

Affichage des informations des fichiers

L'affichage des informations spécifiques à chaque fichier se fait à l'intérieur d'un bloc HTML (div, p...) auquel on attribuera la classe UpAbci_infosFile. Notez que ce bloc sera dupliqué en cas d'upload multiple, en conséquence n'utilisez pas d'identifiant unique de type "id" pour cet élément et pour ses éléments contenus.

Pour des raisons pratiques et techniques, ce bloc devra être inclus dans un conteneur dont on passera l'identifiant comme troisième paramètre dans l'initialisation de la classe JavaScript.

A savoir que si ce bloc est nécessaire pour l'affichage des informations spécifiques à chaque fichier, il est cependant facultatif pour le fonctionnement de l'upload, on peut donc réaliser un formulaire minimaliste, mais néanmoins fonctionnel.

Pour afficher les informations spécifiques à chaque fichier, il suffit de définir des éléments HTML en leur appliquant des classes prédéfinies réservées à cet effet. Je choisis ici d'utiliser des "span" pour un affichage en ligne, par exemple : affichera une vignette de prévisualisation si le fichier est une image, sinon rien. affichera le nom du fichier. affichera une barre de progression graphique de l'upload. affichera le status du fichier: "en cours", "ok", "erreur" ou "arrêt" en fonction de l'état et du résultat du téléchargement. Ces libellés sont paramétrables dans les options de configuration de la classe JavaScript. Notez que l'on peut mettre une valeur par défaut dans l'élément d'information, ici j'ai mis "en attente", elle sera remplacée automatiquement par l'information adéquate durant le téléchargement du fichier.

Remarque : l'affichage de la progression graphique nécessite l'emploi de la balise progress. C'est la seule information qui nécessite l'utilisation d'une balise spécifique.

Liste des classes prédéfinies. Des informations supplémentaires peuvent être retournées en utilisant les fonctions JavaScript événementielles cf mode d'emploi

A ce stade, nous avons le formulaire suivant : Ce code est suffisant pour afficher quatre informations et réaliser l'upload d'un fichier sans limites de taille sur des serveur mutualisés type OVH, Gandi etc. (pour autant on peut bien entendu limiter la taille maximale des fichiers).

Par ailleurs les gros fichiers disposeront d'une sauvegarde automatique permettant une reprise de téléchargement en cas de problème ou d'arrêt volontaire durant l'upload.

Il suffira d'ajouter l'attribut multiple="multiple" dans le champ de type file pour permettre l'upload multiple.

Utilisation des styles événementiels

Nous allons maintenant modifier le comportement du formulaire précédemment créé, avec des styles événementiels.

La barre de progression s'affichera en attente de sélection de fichiers. On peut remédier à ce problème en cachant le bloc d'informations et en l'affichant uniquement si des fichiers sont sélectionnés, en utilisant le style css événementiel data-upabcicss-select-file qui sera déclenché dès la sélection de fichiers: Si je souhaite maintenant que le status du fichier s'affiche en vert et en gras uniquement lorsqu'il est correctement téléchargé je peux utiliser le style événementiel data-upabcicss-result-ok : Nous avons créé un formulaire dynamique possédant des fonctionnalités avancées sans besoin de programmer une seule ligne de code JavaScript. Liste des styles événementiels

Champs complémentaires utilisés pour l'upload

Le code du formulaire précédemment défini est fonctionnel en l'état. Cependant, la classe JavaScript recherchera deux champs input nommés UpAbci_uniqidForm et UpAbci_fragmentSize pour récupérer et renvoyer ces données complémentaires issues du serveur.

Le premier permet de définir un jeton de sécurité qui sera contrôlé côté serveur lors de l'upload, et le second sert à indiquer la taille des fragments qui déterminera la fréquence des sauvegardes automatiques.

Si ces champs sont absents, la classe utilisera des valeurs par défaut. On peut aussi alternativement définir ces valeurs dans les options de configuration de la classe JavaScript.

Pour une meilleure sécurité des scripts, les exemples de formulaires fournis dans le dossier en téléchargement définissent une variable de session en php qui servira de token. Typiquement : Note : Le code des exemples fournis définit une taille de 8Mo pour les fragments et vérifie que cette valeur n'est pas supérieure aux limites serveur (utile uniquement si vous ne les connaissez pas).

Nous retrouvons donc le code html du fichier d'exemple : UploadAjaxABCI_Basique.php, avec ces deux champs complémentaires. J'ai ajouté également l'attribut multiple="multiple" dans le champ de type file pour permettre l'upload multiple et un lien pour stopper l'envoi des fichiers avec la classe UpAbci_stop dans le dernier "span" :

Champs supplémentaires dans le formulaire

Vous pouvez ajouter d'autres champs dans le formulaire, ils seront transmis côté serveur dans la super globale $_POST. La notation tableau est également acceptée.

Pour ajouter des champs de saisie spécifiques à chaque fichier, voir ce paragraphe.

Configuration de la classe JavaScript

Il est conseillé de mettre le code JavaScript juste avant ou juste après la fermeture de la balise "</body>" du formulaire.

La classe JavaScript d'upload est inclue dans le fichier UploadAjaxABCI.js. Elle utilise jQuery que l'on charge en premier.

L'initialisation de la classe JavaScript requiert respectivement l'identifiant du formulaire, la destination de la requête ajax, et l'identifiant du bloc conteneur des informations des fichiers (ce troisième paramètre est facultatif pour l'upload mais indispensable pour une information détaillée sur les fichiers).

Vous pouvez ensuite ajouter des options de configuration pour définir par exemple les extensions de fichiers autorisées, la taille des vignettes de prévisualisation, la taille maximale des fichiers etc. De nombreuses options sont disponibles ainsi que des fonctions JavaScript événementielles. On termine en utilisant la méthode Start().

Récapitulatif de la page complète du formulaire

Pour une mise en page plus aboutie, utilisez le fichier UploadAjaxABCI_Basique.php fourni dans le module d'upload.

Configuration du script côté serveur

Il s'agit ici du fichier d'exemple UploadAjaxABCI_Upload_Basique.php qui est le fichier de destination Ajax du formulaire précédent. Une classe Php d'upload UploadAjaxABCIServeur et de nombreuses classes annexes sont disponibles pour faciliter le code serveur. Elles sont détaillées dans le mode d'emploi et dans les fichiers d'exemples fournis.

Pour un upload sans traitement complémentaire, une petite dizaine de lignes génériques suffisent :

• Définition du dossier de destination
• Ouverture d'une session
• Chargement des classes serveur
• Initialisation de la classe serveur d'upload en passant le dossier de destination
• Récupération du jeton de sécurité du formulaire
• Vérification de la validité du jeton de sécurité enregistré dans la variable de session
• Et envoi d'un message si la vérification échoue
• Initialisation de l'upload
• Initialisation du transfert du fichier vers son emplacement définitif
• Retour des informations pour la requête ajax

Notes :
Dans les fichiers d'exemples fournis dans le dossier d'upload, le message "Jeton de sécurité non valide" est remplacé par un message plus complet avec : En effet une classe SetMessages permet d'utiliser des messages définis dans une classe Messages. C'est pratique si vous avez plusieurs formulaires à traiter ou une traduction à proposer suivant la langue du visiteur.

Iimportant : un contrôle complémentaire sur les extensions des fichiers autorisés est indispensable si votre script est destiné à un usage public, cf. sécurité et validité des fichiers uploadés

Fonctions JavaScript événementielles

Tout comme les styles événementiels permettent d'exécuter des styles CSS en fonction du traitement des fichiers, les fonctions JavaScript événementielles permettent d'exécuter du code JavaScript en fonction du traitement des fichiers. De nombreux exemples d'utilisation sont donnés dans le code source des fichiers de démonstration et la liste des fonctions disponibles est détaillée ici.

Ci-dessous, un exemple pour afficher les informations Exif des fichiers jpg/jpeg et tiff qui sont enregistrées dans les images des appareils photo numériques. J'utilise ici la méthode événementielle config.func_FileSelectEach qui sera exécutée à la sélection de chaque fichier en exploitant les paramètres disponibles dans la fonction. Le paramètre e retourne l'objet event et le paramètre obj retourne un objet contenant de nombreuses propriétés. Notamment la propriété fichier renvoie le fichier en cours et la propriété infosFile renvoie le contexte html spécifique au fichier (soit le bloc ayant la classe "UpAbci_infosFile").

La propriété fichier sera utilisée pour instancier la librairie EXIF et la propriété infosFile sera utilisée pour afficher certaines informations Exif dans le formulaire. J'affiche les informations Exif dans un élément HTML ayant la classe photo_exif que j'ajouterai donc dans le formulaire récapitulatif ci-dessous.

Concernant la configuration JavaScript, j'utiliserai pour exemple l'option config.filesExtensions pour limiter l'upload à des fichiers photo (cette limitation n'est pas indispensable au fonctionnement du script).

La page complète du formulaire est donc maintenant :
Notes :
- Le fichier d'exemple UploadAjaxABCI_Infos_Exif.php retourne ces mêmes informations Exif et montre comment les transmettre au serveur en utilisant la propriété libre join_file des objets JavaScript qui permet d'envoyer des informations additionnelles spécifiques à chaque fichier vers le serveur.

- Les informations Exif sont uniquement disponibles pour les photos issues des appareils photos numériques. Elles ne seront donc pas disponibles pour les fichiers "png", "gif" ni pour les fichiers "jpeg" et "jpg" qui auraient été retravaillés puis enregistrés avec un logiciel photo.

Fonctions JavaScript événementielles (suite)

Ci-dessous un second exemple, toujours basé sur le code du fichier UploadAjaxABCI_Basique.php, pour faire afficher la vitesse de l'upload.

Je rajoute un élément html ayant une classe vitesse pour afficher la vitesse de transfert à l'intérieur du bloc d'information spécifique à chaque fichier défini avec la classe UpAbci_infosFile : Côté javascript j'utilise la méthode javascript événementielle config.func_FileInProgressEach qui est appelée lors de la progression des fichiers (à une fréquence définie par l'option de configuration javascript "config.infosRefresh" soit actuellement chaque seconde). J'utilise le paramètre obj de la fonction pour récupérer les informations nécessaires et faire afficher la vitesse de l'upload.

J'ai préalablement créé une fonction BitFormate qui permet de formater le résultat en Kb/s, Mb/s, Gb/s ...

Le reste est documenté dans le code : Récapitulatif de la page :

Conclusion

Ce module d'upload possède de nombreuses fonctionnalités tout en étant accessible aux débutants avec les classes HTML prédéfinies pour accueillir les informations en temps réel et les styles événementiels pour gérer leur affichage.

Pour les utilisateurs ayant des connaissances en JavaScript, les fonctions événementielles permettent d'aller plus loin et d'interfacer le script avec des plugins jQuery externes ou d'ajouter du code personnalisé.

Idéalement, cet outil est à utiliser avec PHP côté serveur puisque les classes PHP fournies permettent de proposer des exemples directement fonctionnels. Ainsi il vous suffit de poser le dossier préconfiguré sur le serveur pour faire les premiers tests.

Pour d'autres fonctionnalités, recadrage (crop), redimensions d'images, création de filigrane, création d'album photo, validation de formulaire, notation des fichiers, etc. consultez les autres exemples fournis et les commentaires dans le code source de ces fichiers.