Outil d'upload AJAX-PHP

• 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).

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 completmode 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.

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▲

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

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

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

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

<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>

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

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

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

<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>

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

<?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;
?>

<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▲

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 optionsmode d'emploi sont disponibles ainsi que des fonctionsmode d'emploi 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>

<?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.

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'emploimode 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.

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 icimode d'emploi.

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ésmode d'emploi. 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.