FileReader: readAsDataURL() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die readAsDataURL() Methode des FileReader Interfaces wird verwendet, um die Inhalte des angegebenen Blob oder File zu lesen. Wenn der Lesevorgang beendet ist, wird die readyState Eigenschaft DONE, und das loadend Ereignis wird ausgelöst. Zu diesem Zeitpunkt enthält das result Attribut die Daten als data: URL, die die Daten der Datei als base64-codierter String darstellt.

Hinweis: Das result eines Blobs kann nicht direkt als Base64 dekodiert werden, ohne zuerst die Data-URL-Deklaration zu entfernen, die den Base64-codierten Daten vorangeht. Um nur den Base64-codierten String zu erhalten, entfernen Sie zuerst data:*/*;base64, aus dem Ergebnis.

Syntax

js
readAsDataURL(blob)

Parameter

blob

Der Blob oder File, aus dem gelesen werden soll.

Rückgabewert

Keiner (undefined).

Beispiele

Einzeldatendatei lesen

HTML

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

JavaScript

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

  reader.addEventListener(
    "load",
    () => {
      // convert image file to base64 string
      preview.src = reader.result;
    },
    false,
  );

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

Ergebnis

Mehrere Dateien lesen

HTML

html
<input id="browse" type="file" multiple />
<div id="preview"></div>

JavaScript

js
function previewFiles() {
  const preview = document.querySelector("#preview");
  const files = document.querySelector("input[type=file]").files;

  function readAndPreview(file) {
    // Make sure `file.name` matches our extensions criteria
    if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
      const reader = new FileReader();

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

      reader.readAsDataURL(file);
    }
  }

  if (files) {
    Array.prototype.forEach.call(files, readAndPreview);
  }
}

const picker = document.querySelector("#browse");
picker.addEventListener("change", previewFiles);

Ergebnis

Spezifikationen

Specification
File API
# readAsDataURL

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
readAsDataURL

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Siehe auch