FileReader, charger une image dans une page web

FileReader permet d'accéder au système de fichier local et de charger des documents avec du code entièrement JavaScript.

Cela complète la balise <input type="file"> qui permet de sélectionner fichier local, mais peut seulement fournir le contenu de ce fichier à un script sur le serveur avec les données de formulaire.

Test de compatibilité

Votre navigateur reconnaît-il l'API File, dont fait partie l'objet FileReader?

Résultat

Source du code de test:

<script>
if (window.File && window.FileReader && window.FileList && window.Blob) 
  document.write("<b>API File reconnue.</b>");
else
  document.write('<i>API File non reconnue par ce navigateur.</i>');
</script>

Lecture d'un fichier de texte sur le système local

Cette démonstration permet de charger un fichier de texte sur votre ordinateur et d'afficher le contenu dans la page.
Le texte peut contenir du code HTML, mais il faut extraire le contenu de <body> de code de la page pour l'insérer dans une autre page. Voir comment on procède dans l'utilisation d'Ajax pour charger une page HTML.

Code source:

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

<script>
function readerHandler(e2) 
{ 
  var store = document.getElementById('storage');
  store.innerHTML=e2.target.result.split("\n").join("<br>"); 
}

function readfile(e1)
{
  var fileobj = e1.target.files[0]; 
  var fr = new FileReader();
  fr.onload = readerHandler;  
  fr.readAsText(fileobj); 
}

window.onload=function()
{
  var x = document.getElementById("filebrowsed");
  x.addEventListener('change', readfile, false);
}
</script>

Le chargement et l'affichage se dont selon les étapes suivantes:

  1. Ajouter un gestionnaire d'évènement à la balise <input type="file">.
    C'est fait au chargement de la page par une fonction assignée à window.onload.
  2. Un listener est mise en place en l'occurrence la fonction readfile.
    Il crée un objet FileReader, lui ajoute un gestionnaire d'évènement associé à l'attribut onload de cet objet.
    Celui-ci est activé quand le fichier est chargé en mémoire.
    La méthode readAsText charge le fichier.
  3. Le gestionnaire d'évènement readerHandler a pour paramètre un évènement nommé e2 qui a pour attribut le contenu du fichier.
    On récupère ce contenu par e2.target.result.

On voit qu'il suffit de quelques lignes de code pour obtenir le résultat souhaité.

Chargement d'une image dans une page web

En utilisant uniquement JavaScript et l'objet FileReader, on peut permettre à l'utilisateur de charger des images dans une application.
Par exemple il peut charger sa photo pour tester une paire de lunette sans atteinte à sa vie privée car la photo n'est pas chargée sur le serveur, mais seulement dans le navigateur.

Votre image ici

Code HTML:

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

<fieldset><legend>Votre image ici</legend>
    <div  id="imgstore"></div>
</fieldset>

Code JavaScript:

<script>
function imageHandler(e2) 
{ 
  var store = document.getElementById('imgstore');
  store.innerHTML='<img src="' + e2.target.result +'">';
}

function loadimage(e1)
{
  var filename = e1.target.files[0]; 
  var fr = new FileReader();
  fr.onload = imageHandler;  
  fr.readAsDataURL(filename); 
}

window.onload=function()
{
  var x = document.getElementById("filebrowsed");
  x.addEventListener('change', readfile, false);
  var y = document.getElementById("getimage");
  y.addEventListener('change', loadimage, false);
}
</script>

La seule différence notable avec l'exemple précédent est que la méthode readAsText est remplacée par readAsDataURL.
Il faut aussi que l'on crée une balise <img> pour inclure l'image dans la page.

Les noms des fonctions ont été changés pour permettre aux deux démos de coexister dans une même page, c'est la seule raison. On rassemble aussi les créations de gestionnaires d'évènements initiaux dans une seule fonction pour l'associer à window.onload.

On voit encore qu'avec FileReader, charger une image dans une page sans passer par le serveur est très simple.

© 2012 Xul.fr