This page was translated from English by the community. Learn more and join the MDN Web Docs community.

FileReader.readAsDataURL()

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 (en-US) 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

instanceOfFileReader.readAsDataURL(blob);

Parametros

blob

El Blob o File desde el cual leer.

Ejemplo

HTML

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

JavaScript

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

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

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

}

Nota: El constructor FileReader() no es soportado por Internet Explorer versión anterior a la 10. Para una completa compatibilidad de código puedes ver nuestra imagen previa para una posible solucion entre navegadores. Véase también este ejemplo más completo.

Especificaciones

Specification
File API
# readAsDataURL

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también