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

BCD tables only load in the browser

Véase también