Aprende a leer archivos locales en el navegador usando la API FileReader fácilmente.

El objeto FileReader permite que las aplicaciones web lean de forma asincrónica el contenido de los archivos (o búferes de datos sin procesar) almacenados en la computadora del usuario, utilizando objetos File o Blob para especificar el archivo o los datos a leer. Una forma sencilla de acceder a los archivos locales es a través del elemento <input type="file"/> de formulario HTML, que le dará acceso a readonly.

Para comprobar si el navegador es compatible con la API FileReader, utilice la siguiente " if" declaración:

if (window.File && window.FileReader && window.FileList && window.Blob) {
    // Leer archivos
} else {
    alert('The File APIs are not fully supported by your browser.');
}

Un archivo (o Blob) se puede leer de diferentes formas con diferentes métodos gracias a la API FileReader:

Cada método espera el archivo como primer parámetro, para recuperar el archivo (o archivos si existen múltiples atributos), seleccionar el elemento DOM y recuperar el valor de la propiedad de los archivos.

var files = document.getElementById("myFileInput").files;
//
var firstOrUniqueFile = files[0];

if(firstOrUniqueFile){
     // Hacer algo con el archivo
}

Nota: este valor es una matriz (FileList), por lo tanto, debe acceder directamente al archivo con el índice 0 si la entrada del archivo no es múltiple.

Leyendo archivos

Como se mencionó anteriormente, FileReader le permite leer un archivo con diferentes métodos. Cada método trata de manera diferente cómo se le devolverá el contenido, desde texto sin formato hasta binaryData.

En este artículo, aprenderá a utilizar correctamente los métodos readAsTextreadAsDataURL.

readAsText

El readAsTextmétodo se utiliza para leer el contenido del archivo (o blob) especificado . Cuando se completa la operación de lectura, readyState  cambia a DONEse activa resultloadend  y el   atributo del destino contiene el contenido del archivo como una cadena de texto.

Este método espera como parámetro de segundos (opcional) la codificación del texto. 

Utilice el siguiente fragmento para obtener el contenido de texto de un archivo:

<textarea id="editor"></textarea><br>
<p>
 Seleccione un archivo de su computadora para leerlo como texto.
</p>
<input type="file" id="filetoRead" />

<script>
document.getElementById("filetoRead").addEventListener("change",function(){
        var file = this.files[0];

        if (file) {
            var reader = new FileReader();
            
            reader.onload = function (evt) {
                console.log(evt);
                document.getElementById("editor").value = evt.target.result;
            };

            reader.onerror = function (evt) {
                console.error("An error ocurred reading the file",evt);
            };

            reader.readAsText(file, "UTF-8");
        }
    },false);
</script>

Pruebe el código anterior en el siguiente fragmento, leerá el contenido de un archivo de su computadora sin contactar a ningún servidor cuando seleccione un archivo:

readAsDataURL

El método readAsDataURL se utiliza para leer el contenido del archivo (o blob) especificado . Cuando finaliza la operación de lectura, readyState se  convierte en DONEse activa loadEnd  . En ese momento, el atributo de resultado del destino  contiene una  the data as a URL que representa los datos del archivo como una base64cadena codificada.

El siguiente código le permite leer una imagen de su dispositivo y convertirla en una cadena base64. Luego se mostrará en una etiqueta img dentro de un div:

<div id="image-container">

</div>
<p>
Seleccione una imagen de su PC para convertirla a Base64 y mostrarla en este documento
</p>
<input type="file" id="filetoRead" />

<script>document.getElementById("filetoRead").addEventListener("change",function(){
  var file = this.files[0];

  if (file) {
  		if ((file.type == 'image/png') ||
          (file.type == 'image/jpg') ||          
          (file.type == 'image/jpeg')
          ){
      	
         var reader = new FileReader();

      reader.onload = function (evt) {
          var imgTag = '<img style="max-width:300px;" src="'+evt.target.result+'" alt="my image" />';
          document.getElementById("image-container").innerHTML = imgTag;
          alert("Image succefully loaded");
      };

      reader.onerror = function (evt) {
        console.error("An error ocurred reading the file",evt);
      };

      reader.readAsDataURL(file);
        
      }else{
      	alert("Proporcione una imagen png o jpg.");
        return false;
      }
    }
},false);
</script>

Juega con el siguiente fiddle y selecciona un archivo para mostrarlo en el navegador:

Como puede ver, filtra solo imágenes png o jpg utilizando un filtro simple con el tipo MIME del archivo (puede filtrar según su extensión en lugar de su tipo MIME manualmente). Se puede usar readAsDataURL, es decir, para reproducir un archivo de audio en una etiqueta de video.

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores