Outil d'upload AJAX-PHP

Alain Bontemps

Solution complète d'upload Ajax-jQuery avec classes PHP serveur. Informations en temps réel, styles et fonctions JavaScript événementiels, file d'attente et fragmentation.

Posez vos questions et retrouvez les réponses sur la discussion originelle de l'outil : Commentez

- Titre : Outil d'upload AJAX-PHP

- Auteur : Alain Bontemps

- Parution : 27 janvier 2017

- Mise à jour : 18 avril 2018

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2017 Alain Bontemps. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- 1. Présentation

- 1-1. Fonctionnalités

- 1-2. Principe d'utilisation

- 2. Exemple d'utilisation

- 2-1. Configuration du formulaire

- 2-1-1. Affichage des informations des fichiers

- 2-1-2. Utilisation des styles événementiels

- 2-1-3. Champs complémentaires utilisés pour l'upload

- 2-1-4. Champs supplémentaires dans le formulaire

- 2-2. Configuration de la classe JavaScript

- 2-3. Récapitulatif de la page complète du formulaire

- 2-4. Configuration du script côté serveur

- 2-5. Fonctions JavaScript événementielles

- 3. Conclusion

- 4. Ressources disponibles

- 5. Remerciements

1 - Présentation

Ce module d'upload de fichiers utilise la technologie Ajax. Il est composé d'une classe JavaScript/jQuery et de classes PHP côté serveur permettant de bénéficier d'une solution finalisée prête à l'emploi hautement configurable.

Des classes HTML prédéfinies sont utilisées pour accueillir le retour des informations en temps réel dans les éléments HTML de votre choix.

Des styles CSS événementiels ainsi que des fonctions JavaScript événementielles sont disponibles pour contrôler dynamiquement le formulaire et interfacer le script avec des plugins jQuery ou du code personnalisé.

La technique de fragmentation utilisée en interne, totalement transparente pour l'utilisateur, permet de télécharger aussi bien des petits fichiers que des très gros en s'affranchissant des limites serveur upload_max_filesize, post_max_size et max_file_uploads. Elle permet également une reprise d'upload pour les gros fichiers en utilisant la partie déjà téléchargée qui est automatiquement sauvegardée.

Plus d'une quinzaine d'exemples de formulaires opérationnels sont fournis pour montrer l'utilisation des différentes fonctionnalités et options de configurations : formulaires customisés, upload de gros fichiers, crop (recadrage) d'images avant upload, contrôle de fichiers déjà existants sur le serveur dès la sélection des fichiers, informations EXIF des images, inscription avec avatar et recadrage optionnel, redimensionnements multiples d'images, etc.

Un mode d'emploi complet est disponible dans la page d'index du dossier préconfiguré proposé en téléchargement. Il suffit de dézipper ce dossier puis de le poser sur votre serveur pour faire directement les premiers tests si vous utilisez PHP côté serveur.

À noter que la classe JavaScript* est indépendante et pourrait être utilisée avec une autre technologie que PHP côté serveur.

Code compatible IE>=10, et option « by pass » pour permettre l'upload avec les navigateurs obsolètes (exemples fournis).

* Le terme « classe JavaScript » est employé pour faciliter la compréhension pour le plus grand nombre, mais il s'agit ici plus exactement de prototype.

1-1 - Fonctionnalités

- Retour d'informations en temps réel : nom, taille, progression, vignettes de prévisualisation des images, temps restant, statut…

- Styles CSS événementiels pour personnaliser l'affichage des éléments du formulaire en fonction du retour des événements en temps réel.

- Fonctions JavaScript événementielles. Permet d'exécuter du code JavaScript personnalisé en fonction du retour des événements en temps réel et d'interfacer le code avec des modules jQuery externes.

- Customisation des boutons de sélection avec comportements drag and drop et/ou onclick.

- Options de configuration pour contrôler les extensions de fichiers autorisées, la taille maximale des fichiers, les dimensions des vignettes de prévisualisation, les libellés des messages et les paramètres internes de fonctionnement.

- Surpasse les limitations serveur upload_max_filesize, post_max_size et max_file_uploads.

- Sauvegarde automatique pour les gros fichiers permettant la reprise d'un téléchargement interrompu après un arrêt volontaire ou une panne Internet ou serveur, en utilisant la partie sauvegardée.

- Bouton d'arrêt pour chaque fichier et bouton d'arrêt général.

- Option « by pass » pour navigateurs obsolètes (exemples fournis).

1-2 - Principe d'utilisation

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 Ajax-jQuery 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 complet 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.

2 - Exemple d'utilisation

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.

2-1 - 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 pourra être un objet jQuery.

2-1-1 - 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.

À 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 appliquant des classes réservées à cet effet. Je choisis ici d'utiliser des span pour un affichage en ligne, par exemple :

<span class="UpAbci_imgPreview"></span>

affichera une vignette de prévisualisation si le fichier est une image, sinon rien.

<span class="UpAbci_name"></span>

affichera le nom du fichier.

<progress class="UpAbci_progressionG"></progress>

affichera une barre de progression graphique de l'upload.

<span class="UpAbci_status">en attente</span>

affichera le statut 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.

À ce stade, nous avons le formulaire suivant :

<form id="form_base" action="#" method="post">
<input type="file" name="upload_base"  />
<input type="submit" value="Envoyer" />

<!-- Bloc conteneur du retour d'informations -->
<div id="reponse_upload">
<!--Retour des informations spécifiques aux fichiers -->
<div class="UpAbci_infosFile">
<span class="UpAbci_imgPreview"></span>
<span class="UpAbci_name"></span>
<progress class="UpAbci_progressionG"></progress>
<span class="UpAbci_status">en attente</span>
</div>
</div>
</form>

Ce code est suffisant pour afficher quatre informations et réaliser l'upload d'un fichier sans limites de taille sur des serveurs 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.

2-1-2 - 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.

<div class="UpAbci_infosFile" style="display:none" data-upabcicss-select-file="display:block;">

Si je souhaite maintenant que le statut 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 :

<span class="UpAbci_status" data-upabcicss-result-ok="color:green;font-weight:bold">en attente</span>

Nous avons créé un formulaire dynamique possédant des fonctionnalités avancées sans besoin de programmer une seule ligne de code JavaScript.

<form id="form_base" action="#" method="post">
<input type="file" name="upload_base"  />
<input type="submit" value="Envoyer" />

<!-- Bloc conteneur du retour d'informations -->
<div id="reponse_upload">
<!--Retour des informations spécifiques aux fichiers -->
<div class="UpAbci_infosFile" style="display:none" data-upabcicss-select-file="display:block;">
<span class="UpAbci_imgPreview"></span>
<span class="UpAbci_name"></span>
<progress class="UpAbci_progressionG"></progress>
<span class="UpAbci_status" data-upabcicss-result-ok="color:green;font-weight:bold">en attente</span>
</div>
</div>
</form>

Liste des styles événementiels

2-1-3 - 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 :

<?php
session_start();
header('Content-type: text/html; charset=UTF-8');// Inutile avec php >= 5.6

// Charge la classe de services php pour les fonctions "returnOctets" et  "getUniqid"
require 'Php_Upload/Classes/UploadABCIServices.php';
$up = new UploadABCIServices();

// On choisit ici des fragments de 2Mo pour l'exemple (à augmenter si possible pour les gros fichiers, sinon cela générerait beaucoup de trafic serveur)
$UpAbci_fragmentSize = $up->returnOctets('2M');

// Variable aléatoire unique utilisée pour la définition du token (jeton de sécurité) enregistré dans une variable de session
$UpAbci_uniqidForm = $up->getUniqid();

// Enregistrement de la variable de session qui sera comparée lors de l'upload
$_SESSION['UploadAjaxABCI'][$UpAbci_uniqidForm]['token'] = 1;
?>

Note : le code des exemples fournis définit une taille de 8 Mo 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 :

<form id="form_base" action="#" method="post">
<input type="file" name="upload_base" multiple="multiple">
<input type="hidden" name="UpAbci_uniqidForm" value="<?=$UpAbci_uniqidForm?>">
<input type="hidden" name="UpAbci_fragmentSize" value="<?=$UpAbci_fragmentSize?>">
<input type="submit" value="Envoyer">

<!-- Bloc conteneur du retour d'informations -->
<div id="reponse_upload">
<!--Retour des informations spécifiques aux fichiers -->
<div class="UpAbci_infosFile" style="display:none" data-upabcicss-select-file="display:block;">
<span class="UpAbci_imgPreview"></span>
<span class="UpAbci_name"></span>
<progress class="UpAbci_progressionG"></progress>
<span class="UpAbci_status" data-upabcicss-result-ok="color:green;font-weight:bold">en attente</span>
<span class="UpAbci_stop" style="color:red">stop</span>
</div>
</div>
</form>

2-1-4 - Champs supplémentaires dans le formulaire

Vous pouvez ajouter d'autres champs dans le formulaire, ils seront transmis côté serveur et vous pourrez les récupérer en php 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.

2-2 - 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 incluse dans le fichier UploadAjaxABCI.js. Elle utilise jQuery que l'on charge en premier.

L'initialisation de la classe JavaScript requiert respectivement la destination de la requête Ajax, l'identifiant du formulaire, 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 fonction Start().

<script src="Javascript/jquery.js"></script>
<script src="Javascript/UploadAjaxABCI.js"></script>
<script>
// Destination de la requête ajax d'upload
var destination_ajax = 'Php_Upload/UploadAjaxABCI_Php_Load_Basique.php';

// Initialisation de la classe javascript (destination ajax, identifiant formulaire, identifiant réponse)
var up = new UploadAjaxABCI(destination_ajax,'#form_base','#reponse_upload');

/* configuration optionnelle. Par exemple pour limiter les fichiers à une taille de 100Mo :
up.config.fileSizeMax = '100 Mo';
*/

// Démarrage de la fonction, DOM chargé
$(function(){up.Start()});
</script>

2-3 - Récapitulatif de la page complète du formulaire

<?php
session_start();
require 'Php_Upload/Classes/UploadABCIServices.php';
$up = new UploadABCIServices();
$UpAbci_fragmentSize = $up->returnOctets('2M');
$UpAbci_uniqidForm = $up->getUniqid();
$_SESSION['UploadAjaxABCI'][$UpAbci_uniqidForm]['token'] = 1;
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Basique Upload Ajax ABCIWEB</title>
</head>
<body>
<form id="form_base" action="#" method="post">
<input type="file" name="upload_base" multiple="multiple"  />
<input type="hidden" value="<?=$UpAbci_fragmentSize?>" name="UpAbci_fragmentSize" />
<input type="hidden" value="<?=$UpAbci_uniqidForm?>" name="UpAbci_uniqidForm" />
<input type="submit" value="Envoyer" />

<div id="reponse_upload">
<div class="UpAbci_infosFile" style="display:none;" data-upabcicss-select-file="display:block;">
<span class="UpAbci_imgPreview"></span>
<span class="UpAbci_name"></span>
<progress class="UpAbci_progressionG"></progress>
<span class="UpAbci_status" data-upabcicss-result-ok="color:green;font-weight:bold">en attente</span>
<span class="UpAbci_stop" style="color:red">stop</span>
</div>
</div>
</form>
</body>
<script src="Javascript/jquery.js"></script>
<script src="Javascript/UploadAjaxABCI.js"></script>
<script>
var destination_ajax = 'Php_Upload/UploadAjaxABCI_Upload_Basique.php';
var up = new UploadAjaxABCI(destination_ajax,'#form_base','#reponse_upload');
$(function(){up.Start()});
</script>
</html>

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

2-4 - 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, 10 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.

<?php
// Vous devez vérifier l'existence du dossier ou changer cette adresse
$dossier_destination = '../Destination_Upload1/';

session_start();
header('Content-type: text/html; charset=UTF-8');// Inutile avec php >= 5.6

// Charge les classes php avec spl_autoload_register
spl_autoload_register(function ($class) {require 'Classes/' . $class . '.php';});

// Initialisation de la classe d'upload php (dossier de destination)
$up = new UploadAjaxABCIServeur($dossier_destination);

// retourne l'identifiant de formulaire pour la vérification ci-dessous
$uniqid_form = $up->getParam("uniqid_form");

// Vérification du jeton de sécurité
if(!(isset($uniqid_form,$_SESSION['UploadAjaxABCI'][$uniqid_form]['token'])))
{
//Sort du script en envoyant un message si la vérification échoue
$up->exitStatusErreur('Jeton de sécurité non valide');
}

// Le processus d'upload est dissocié de celui du transfert, pour permettre de traiter le fichier complet (par exemple pour faire des redimensionnements d'images en php, etc.) avant de le déplacer vers son emplacement définitif
$up->Upload();

$up->Transfert();

// INDISPENSABLE en fin de script, "exitReponseAjax()" retourne les informations nécessaires pour la requête ajax.
$up->exitReponseAjax();
?>

À noter que dans le fichier d'exemple fourni dans le dossier, le message « Jeton de sécurité non valide » est remplacé par un message plus complet avec :

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

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 du code complexe faisant intervenir plusieurs fichiers ou une traduction à proposer suivant la langue du visiteur.

2-5 - 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 fonction é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.

config.func_FileSelectEach = function(e,obj) {}

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.

up.config.func_FileSelectEach = function(e,obj)
{
// On récupère le fichier avec la propriété "fichier" de l'objet pour initialiser la librairie EXIF (https://github.com/exif-js/exif-js)
EXIF.getData(obj.fichier, function() {

// Décommenter la ligne ci-dessous pour voir toutes les informations disponibles
//console.log(EXIF.getAllTags(this));

// Pour l'exemple, affichage des informations dans l'élément html ayant la classe "photo_exif". La propriété "infosFile" de l'objet fait référence au bloc html ayant la classe "UpAbci_infosFile"
var destination_html = obj.infosFile.find('.photo_exif');

// Si les informations exif existent
if(!$.isEmptyObject(EXIF.getAllTags(this)))
{
// Affichage des informations dans le html
destination_html.html("marque : "+EXIF.getTag(this, "Make")+"<br>modèle : "+EXIF.getTag(this, "Model")+"<br>programme d'exposition : "+EXIF.getTag(this, "ExposureProgram")+"<br>date : "+EXIF.getTag(this, "DateTime"));
}
else
{
destination_html.html("Aucune information Exif pour cette photo");
}
});
}

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 :

<?php
session_start();
require 'Php_Upload/Classes/UploadABCIServices.php';
$up = new UploadABCIServices();
$UpAbci_fragmentSize = $up->returnOctets('2M');
$UpAbci_uniqidForm = $up->getUniqid();
$_SESSION['UploadAjaxABCI'][$UpAbci_uniqidForm]['token'] = 1;
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Basique Upload Ajax ABCIWEB</title>
</head>
<body>
<form id="form_base" action="#" method="post">
<input type="file" name="upload_base" multiple="multiple"  />
<input type="hidden" value="<?=$UpAbci_fragmentSize?>" name="UpAbci_fragmentSize" />
<input type="hidden" value="<?=$UpAbci_uniqidForm?>" name="UpAbci_uniqidForm" />
<input type="submit" value="Envoyer" />

<div id="reponse_upload">
<div class="UpAbci_infosFile" style="display:none;" data-upabcicss-select-file="display:block;">
<p>
<span class="UpAbci_imgPreview" style="float:left"></span>
<span class="photo_exif"></span>
</p>
<p style="clear:both">
<span class="UpAbci_name"></span>
<progress class="UpAbci_progressionG"></progress>
<span class="UpAbci_status" data-upabcicss-result-ok="color:green;font-weight:bold">en attente</span>
<span class="UpAbci_stop" style="color:red">stop</span>
</p>
</div>
</div>
</form>
</body>
<script src="Javascript/jquery.js"></script>
<!-- charge la librairie EXIF" -->
<script src="Javascript/Exif.js"></script>
<script src="Javascript/UploadAjaxABCI.js"></script>
<script>
var destination_ajax = 'Php_Upload/UploadAjaxABCI_Upload_Basique.php';
var up = new UploadAjaxABCI(destination_ajax,'#form_base','#reponse_upload');
up.config.filesExtensions = ['jpg','jpeg','png','gif','tiff'];
up.config.func_FileSelectEach = function(e,obj){
EXIF.getData(obj.fichier, function() {
var destination_html = obj.infosFile.find('.photo_exif');

if(!$.isEmptyObject(EXIF.getAllTags(this))){
destination_html.html("marque : "+EXIF.getTag(this, "Make")+"<br>modèle : "+EXIF.getTag(this, "Model")+"<br>programme d'exposition : "+EXIF.getTag(this, "ExposureProgram")+"<br>date : "+EXIF.getTag(this, "DateTime"));
}
else{
destination_html.html("Aucune information Exif pour cette photo");
}
});
}

$(function(){up.Start()});
</script>
</html>

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 directement issues des appareils photo numériques.

3 - 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 utilitaire d'upload 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, validation de formulaire, système de notation spécifique, etc. consultez les exemples fournis et les commentaires dans le code source de ces fichiers.

4 - Ressources disponibles

Téléchargement du module d'upload

Commentez

5 - Remerciements

Remerciements à Vermine pour le suivi et les conseils pour la réalisation de cet article et f-leb pour les relectures, corrections et mise en forme.