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 una URL representando la información del archivo como una cadena de caracteres codificados en base64.

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() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

Resultado en vivo

Nota: el constructor FileReader() no es soportado por Internet Explorer version anterior a la 10. Para una completa compatibilidad de codigo puedes ver nuestra Posibler solución de compatibilidad para vista previa de imagenes entre navegadores. Ve también este ejemplo más poderoso.

Especificaciones

Specification	Status	Comment
File API The definition of 'FileReader' in that specification.	Working Draft	Initial definition

Compatibilidad de navegadores

BCD tables only load in the browser

Tambien ver

FileReader