Comment uploader des fichiers de manière asynchrone en jQuery et AJAX ?

Avec la bibliothèque jQuery, il est possible d'effectuer un upload de fichier asynchrone, c'est-à-dire un chargement qui va se dérouler pendant que l'internaute continue de surfer sur la page web.

Dans le développement Web, les envois de fichiers vers le serveur sont utilisés le plus souvent lors de la validation d'un formulaire. Le processus se fait donc de manière synchrone et le serveur devra attendre que le fichier soit envoyé au serveur avant de continuer le traitement. Cela peut poser un problème si le fichier est volumineux.

Grâce à la bibliothèque jQuery, il est possible d'effectuer un upload de fichier asynchrone, c'est-à-dire un upload qui va se dérouler pendant que l'internaute continue de travailler sur la même page web. La première méthode pour effectuer un upload de fichier asynchrone utilise HTML 5 et permet même d'afficher une barre de progression facilement. Le code HTML contient un champ fichier et un bouton dans un formulaire ainsi que la balise HTML5 qui affiche la barre de progression :

<form enctype=multipart/form-data>
 <input name=fichier type=file />
 <input type=button value=Envoyer le fichier />
</form>
<progress></progress>

L'upload du fichier doit se déclencher par appui sur le bouton. Il faut donc utiliser la méthode click() de jQuery. La méthode ajax() va lancer de manière asynchrone l'upload de fichier. Pour cela, le formulaire va être envoyé sous forme de données à un script du serveur qui traitera le fichier uploadé. Il est ensuite possible d'ajouter des fonctions supplémentaires pour traiter le retour du script PHP ou encore d'effectuer un traitement avant envoi.

Le paramètre xhr, qui permet d'ajouter un traitement qui s'effectuera en parallèle de l'appel AJAX, sera utilisé pour gérer la barre de progression. On y ajoutera une fonction permettant de changer la barre de progression en fonction de l'avancement de l'envoi du fichier :

jQuery(':button').click(function(){
var formulaire = new FormData($('form')[0]);
$.ajax({
url: 'upload.php', //script qui traitera l'envoi du fichier
type: 'POST',
xhr: function() { // xhr qui traite la barre de progression
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // vérifie si l'upload existe
myXhr.upload.addEventListener('progress',afficherAvancement, false); // Pour ajouter l'évènement progress sur l'upload de fichier
}
return myXhr;
},
//Traitements AJAX
beforeSend: traitementAvantEnvois,
success: traitementSiReussite,
error: taitementSiEchec,
//Données du formulaire envoyé
data: formData,
//Options signifiant à jQuery de ne pas s'occuper du type de données
cache: false,
contentType: false,
processData: false
});
});
function afficherAvancement(e){
if(e.lengthComputable){
$('progress').attr({value:e.loaded,max:e.total});
}
}