FileReader.readAsDataURL()

Metoden readAsDataURL används för att läsa innehållet i en specificerad Blob eller File. När läsningen har slutförts, så blir readyState DONE, och loadend utlöses. Vid den tidpunkten så innehåller attributet result datan som en data: URL som representerar filens data som en base64-kodad textsträng.

Märk: filens result resulterar i en textsträng som ej direkt kan avkodas som Base64. För att få ut bara en Base64-kodad textsträng, måste du ta bort data:*/*;base64, från textsträngen.

Syntax

instanceOfFileReader.readAsDataURL(blob);

Parametrar

blob
Den Blob eller File som ska läsas från.

Exempel

HTML

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

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);
  }
}

Live Result

Exempel - läsa flera filer

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

    // Se till att `file.name` matchar våra fil-extensions kriteria
    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);
  }

}
Märk: Konstruktorn för FileReader() stöddes inte av Internet Explorer i versionerna innan 10. För en full kompatibilitetskod kan du gärna gå till crossbrowser möjlig lösning för bild förhandsvisning. Se också detta kraftfullare exempel.

Specifikationer

Specifikation Status Kommentar
File API
The definition of 'FileReader' in that specification.
Working Draft Första definitionen

Webbläsar kompatibilitet

BCD tables only load in the browser

Se även