Upload de fichiers avec l'objet X

Parent Previous Next


Upload de fichiers avec l'objet XMLHttpRequest



Il était auparavant impossible d'uploader des données binaires avec l'objet XMLHttpRequest, car celui-ci ne supportait pas l'utilisation de l'objet FormData (qui, de toute manière, n'existait pas à cette époque). Cependant, depuis l'arrivée de ce nouvel objet ainsi que de la deuxième version du XMLHttpRequest, cette « prouesse » est maintenant réalisable facilement.


Ainsi, il est maintenant très simple de créer des données binaires (grâce à un Blob) pour les envoyer sur un serveur. En revanche, il est bien probable que créer vos propres données binaires ne vous intéresse pas, l'upload de fichiers est nettement plus utile, non ? Alors, ne tardons pas et étudions cela !


Afin d'effectuer un upload de fichiers, il vous faut tout d'abord récupérer un objet de type File, il nous faut donc un <input> :

<input id="file" type="file" />


À cela, ajoutons un code Javascript qui récupère le fichier spécifié et s'occupe de créer une requête XMLHttpRequest :

var fileInput = document.querySelector('#file');

 

fileInput.onchange = function() {

 

    var xhr = new XMLHttpRequest();

 

    xhr.open('POST', 'http://exemple.com'); // Rappelons qu'il est obligatoire d'utiliser la méthode POST quand on souhaite utiliser un FormData

 

    xhr.onload = function() {

        alert('Upload terminé !');

    };

 

    // Upload du fichier…

 

};


Maintenant, que fait-on ? C'est très simple, il nous suffit de passer notre objet File à un objet FormData et d'uploader ce dernier :

var form = new FormData();

 

form.append('file', fileInput.files[0]);

 

xhr.send(form);


Pensez bien à uploader un petit fichier (<100 Ko) si vous voulez ne pas avoir un résultat trop long à l'affichage.


Et ? C'est tout ?


Plus ou moins. L'upload de fichiers par le biais d'un objet XHR ne va pas révolutionner votre façon de coder. Il permet juste de simplifier les choses puisque l'on n'a plus à s'embêter à passer par le biais d'une <iframe>.


En revanche, il nous reste encore un petit quelque chose en plus à étudier et cela va sûrement vous intéresser : afficher la progression de l'upload ! L'objet XHR est déjà nettement plus intéressant, non ?


Nous n'avions pas étudié cela plus tôt, car vous n'auriez pas été capables de vous en servir de manière utile, mais sachez que l'objet XHR possède une propriété upload donnant accès à plusieurs événements dont l'événement progress. Ce dernier fonctionne exactement de la même manière que le précédent événement progress que nous avions étudié dans le chapitre consacré à l'objet XHR :

xhr.upload.onprogress = function(e) {

 

    e.loaded; // Nombre d'octets uploadés

    e.total;  // Total d'octets à uploader

 

};


Ainsi, il est facile de faire une barre de progression avec cet événement et la balise HTML5 <progress> :

<input id="file" type="file" />

<progress id="progress"></progress>

var fileInput = document.querySelector('#file'),

    progress = document.querySelector('#progress');

 

fileInput.onchange = function() {

 

    var xhr = new XMLHttpRequest();

 

    xhr.open('POST', 'http://exemple.com');

 

    xhr.upload.onprogress = function(e) {

        progress.value = e.loaded;

        progress.max = e.total;

    };

     

    xhr.onload = function() {

        alert('Upload terminé !');

    };

 

    var form = new FormData();

    form.append('file', fileInput.files[0]);

 

    xhr.send(form);

 

};


Ici, utilisez plutôt un fichier de taille moyenne (~1 Mo) si vous voulez voir un affichage de la progression.


En résumé


Créé avec HelpNDoc Personal Edition: Générateur d'aides CHM gratuit

Site à deux balles