Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez également contribuer en rejoignant la communauté francophone sur MDN Web Docs.

FileReader.readAsDataURL()

La méthode FileReader.readAsDataURL() est utilisée afin de lire le contenu d'un blob (Blob) ou d'un fichier (File). Lorsque l'opération de lecture est terminée, readyState (en-US) prend la valeur DONE, et l'évènement loadend (en-US) est déclenché. À partir de ce moment, la propriété result (en-US) contient les données sous la forme d'une URL de données qui représente les données du fichier sous la forme d'une chaîne de caractères encodée en base64.

Note : Pour un blob, result (en-US) ne peut pas être décodé en base64 sans avoir d'abord retiré la déclaration d'URL de données qui précède les données encodées. Pour récupérer uniquement la chaîne encodée en base 64, il faut d'abord supprimer le préfixe data:*/*;base64, du résultat.

Syntaxe

instanceOfFileReader.readAsDataURL(blob);

Paramètres

blob

L'objet Blob ou File qu'on souhaite lire.

Exemples

Exemple simple

HTML

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Prévisualisation de l'image…">

JavaScript

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

  reader.addEventListener("load", function () {
    // on convertit l'image en une chaîne de caractères base64
    preview.src = reader.result;
  }, false);

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

Résultat

Lire 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) {

    // On s'assure que `file.name` termine par 
    // une des extensions souhaitées
    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);
  }

}

Note : Le constructeur FileReader() n'était pas pris en charge pour les versions d'Internet Explorer antérieures à IE 10. Voir aussi cet autre exemple.

Spécifications

Specification
File API
# readAsDataURL

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi