Ejemplo de Dom FileReader.readAsDataURL

los readAsDataURL El método se utiliza para leer el contenido de la especificación Blob o File. Cuando finaliza la operación de lectura, readyState se convierte en DONE, y el loadend se activa. En ese momento, el result attribute contiene los datos como un datos: URL que representa los datos del archivo como codificado en base64 string.

Nota: La mancha result no se puede decodificar directamente como Base64 sin eliminar primero la declaración de URL de datos que precede a los datos codificados en Base64. Para recuperar solo el codificado en Base64 string, primero quitar data:*/*;base64, del resultado.

Sintaxis

instanceOfFileReader.readAsDataURL(blob);

Parámetros

blob

los Blob o File de donde leer.

Ejemplo

HTML

<inputtype="file"onchange="previewFile()"><br><imgsrc=""height="200"alt="Image preview...">

JavaScript

functionpreviewFile()const preview = document.querySelector('img');const file = document.querySelector('input[type=file]').files[0];const reader =newFileReader();

  reader.addEventListener("load",function()// convert image file to base64 string
    preview.src = reader.result;,false);if(file)
    reader.readAsDataURL(file);

Resultado en vivo

Ejemplo de lectura de varios archivos

HTML

<inputid="browse"type="file"onchange="previewFiles()"multiple><divid="preview">div>

JavaScript

functionpreviewFiles()var preview = document.querySelector('#preview');var files   = document.querySelector('input[type=file]').files;functionreadAndPreview(file)pngif(files)[].forEach.call(files, readAndPreview);

Nota: los FileReader() El constructor no era compatible con Internet Explorer para las versiones anteriores a 10. Para obtener un código de compatibilidad completo, puede ver nuestro crossbrowser posible solución para la vista previa de imágenes. Ver también este ejemplo más poderoso.

Especificaciones

Compatibilidad del navegador

Ver también

• FileReader
• URL.createObjectURL()