FileReader.readAsDataURL()

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.

El método readAsDataURL es usado para leer el contenido del especificado Blob o File. Cuando la operación de lectura es terminada, el readyState se convierte en DONE, y el loadend es lanzado. En ese momento, el atributo result contiene la información como un datos: URL representando la información del archivo como una cadena de caracteres codificados en base64.

Nota: El result de blob no puede ser directamente decodificado como Base64 sin primero remover la delaración de Datos-URL de la información codificada en Base64. Para recuperar únicamente la cadena codifidicada en Base64, primero remueve data:*/*;base64, del resultado.

Sintaxis

js
instanceOfFileReader.readAsDataURL(blob);

Parametros

blob

El Blob o File desde el cual leer.

Ejemplo

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",
    function () {
      // convierte la imagen a una cadena en base64
      preview.src = reader.result;
    },
    false,
  );

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

Resultado

Ejemplo leyendo multiples archivos

HTML

html
<input id="browse" type="file" onchange="previewFiles()" multiple />
<div id="preview"></div>

JavaScript

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

  function readAndPreview(file) {
    // Asegurate que `file.name` coincida con el criterio de extensiones
    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);
  }
}

Especificaciones

Specification
File API
# readAsDataURL

Compatibilidad con navegadores

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.

Véase también