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 ⁨julio de 2015⁩.

El métodoreadAsDataURL es usado para leer el contenido del especificadoBlob oFile. Cuando la operación de lectura es terminada, elreadyState se convierte enDONE, y elloadend es lanzado. En ese momento, el atributoresult contiene la información como undatos: URL representando la información del archivo como una cadena de caracteres codificados en base64.

Nota:Elresult de blob no puede serdirectamente decodificado como Base64 sin primero remover la delaración de Datos-URLde la información codificada en Base64. Para recuperar únicamente la cadena codifidicadaen Base64, primero remuevedata:*/*;base64, del resultado.

Sintaxis

instanceOfFileReader.readAsDataURL(blob);

Parametros

blob: ElBlob oFile desde el cual leer.

Ejemplo

HTML

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

<input type="file" onchange="previewFiles()" multiple /><div></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);  }}