Denna översättning är ofullständig. Hjälp till att översätta denna artikel från engelska.

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 7Edge Full support YesFirefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

Se även

Dokumenttaggar och bidragare

Bidragare till denna sida: valterekholm
Senast uppdaterad av: valterekholm,