FileReader.readAsDataURL()

El método readAsDataURL es usado para leer el contenido del especificado BlobFile.  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 BlobFile 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