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 renvoie l’état DONE, et l’évènement loadend se déclenche. À ce moment-là, l’attribut result 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

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Feature Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Support de base 3.6 (1.9.2)[1] 7 (Oui) 10[2] 12.02[3] 6.0
Feature Firefox Mobile (Gecko) Android Edge IE Mobile Opera Mobile Safari Mobile
Support de base 32 3 (Oui) 10 11.5 6.0

[1] Avant la version Gecko 2.0 beta 7 (Firefox 4.0 beta 7), tous les paramètres Blob ci-dessous étaient des paramètres File. Depuis, une mise à jour a été effectuée pour la prise en charge correcte de cette spécification. Avant la version Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) la propriété FileReader.error renvoyait un objet FileError. Cette interface a été supprimée et le paramètre FileReader.error renvoie désormais l’objet DOMError tel que défini dans la version API File la plus récente.

[2] IE9 intègre un File API Lab.

[3] Opera inclut un support partiel dans la version 11.1.

Voir aussi