FileReader.readAsDataURL()

La méthode readAsDataURL permet de lire le contenu de l’objet Blob ou File spécifié. À la fin de l’opération de lecture, la propriété readyState (en-US) renvoie l’état DONE, et l’évènement loadend (en-US) se déclenche. À ce moment-là, l’attribut result (en-US) contient les données dans une URL représentant les données du fichier sous forme de chaîne encodée en base64.

Syntaxe

instanceOfFileReader.readAsDataURL(blob);

Paramètres

blob: L’argument Blob ou File à partir duquel exécuter la lecture.

Exemple

HTML

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Aperçu de l’image...">

JavaScript

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

Résultat en direct

Exemple de lecture de plusieurs fichiers

HTML

<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>

JavaScript

function previewFiles() {

  var preview = document.querySelector('#preview');
  var files   = document.querySelector('input[type=file]').files;

  function readAndPreview(file) {

    // Veillez à ce que `file.name` corresponde à nos critères d’extension
    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
      var reader = new FileReader();

      reader.addEventListener("load", function () {
        var image = new Image();
        image.height = 100;
        image.title = file.name;
        image.src = this.result;
        preview.appendChild( image );
      }, false);

      reader.readAsDataURL(file);
    }

  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }

}

Remarque : le constructeur FileReader() n’est pas pris en charge dans les versions IE antérieures à Internet Explorer 10. Pour un code compatible avec tous les navigateurs, accédez à notre solution d’aperçu d’image multinavigateur. Examinez également cette alternative plus puissante.

Spécifications

Spécification	État	Commentaire
Unknown La définition de 'FileReader' dans cette spécification.	Statut inconnu	Définition initiale

Compatibilité avec les navigateurs

BCD tables only load in the browser

Voir aussi

FileReader