Cómo leer archivos locales en JavaScript

JavaScript es un lenguaje de programación web de alto nivel que brinda páginas web la capacidad de pensar y actuar. JavaScript ofrece a los desarrolladores interactividad con archivos que están presentes en el sistema local del desarrollador. La interactividad con los archivos puede ser de diferentes tipos, por ejemplo, cargar un archivo a un servidor o cargarlo con restricciones.

Hay múltiples formas de abrir y leer archivos locales en JavaScript, más común ser utilizando el sistema de archivos/promesas incorporadas API API -"FS" API, o utilizando el atributo de archivo Seleccionar HTML de la

Etiqueta, o incluso usando algún paquete externo y luego probando su método.

Entonces, en esta publicación, le mostraremos cómo leer archivos locales en JavaScript usando el API FS y usando

El atributo de archivo seleccionado html.

API de FileReader HTML5

HTML5 introdujo un mecanismo consistente para tratar con archivos locales introduciendo el API del lector de archivos especificación. El API del lector de archivos se puede utilizar para proporcionar una vista previa de miniatura de fotos cuando se transmiten a un servidor, así como para permitir que una aplicación web almacene una referencia de archivo incluso si el usuario no está conectado a Internet. Usando los controladores de eventos de JavaScript y la API del lector de archivos, podemos leer asincrónicamente un archivo.

El lector de archivos API nos ofrece cuatro métodos incorporados que podemos usar para leer archivos de manera asincrónica. El primer método incorporado es el Filereader.ReadAsArrayBuffer () que lee un contenido de archivo local pero devuelve un ArrayBuffer que tiene el contenido del archivo. Entonces viene el Filereader.ReadAsdataurl () que devuelve una URL de los datos de un archivo local.

El Filereader.ReadAsBinaryString () Devuelve el contenido del archivo local en un formato de cadena y el método integrado más utilizado de FileReader es el Filereader.readastext () que devuelve el contenido del archivo local en un formato de cadena de texto o podemos decir en forma legible por humanos.

Ahora que sabemos qué es FileReader API, establezcamos el entorno HTML para que un usuario seleccione un archivo que él/ella quiere que lea el navegador.

Html seleccionar archivo

HTML es un lenguaje de marcado de hipertexto que se utiliza para dar estructura a nuestras páginas web. Usaremos HTML para que el usuario seleccione un archivo y luego usaremos JavaScript para leer el contenido del archivo. El código HTML se proporciona a continuación:

En el código anterior, hemos inicializado un aporte Etiqueta con el tipo de archivo y dado el atributo identificación que se utilizará para hacer referencia a este elemento en nuestro archivo JavaScript. A continuación, hemos inicializado un pag etiqueta en la que se publicará nuestro contenido del archivo una vez que el usuario seleccione un archivo. Al final, usamos el guion con el atributo SRC en el que hemos hecho referencia a un archivo código.js que contendrá nuestro código JavaScript.

JavaScript Leer la funcionalidad del archivo

Hemos terminado con HTML, así que ahora pasemos a JavaScript para lograr nuestro propósito de leer un archivo en JavaScript. Para este propósito, utilizaremos el método incorporado de la API del lector de archivos readastext (). El código JavaScript se proporciona a continuación:

var myFile = documento.getElementById ("myfile");
var fileOutput = documento.getElementById ("FileOutput");
mi archivo.addEventListener ('Change', function ()
var filereader = new FileReader ();
filereader.onload = function ()
FileOutput.textContent = FileReader.resultado;

filereader.readastext (esto.archivos [0]);
)

En el código anterior, primero, obtenemos la referencia del archivo de entrada y el pag Etiqueta que configuramos en el HTML usando su atributo de identificación. A continuación, hemos agregado un oyente de eventos de cambio para que cada vez que un usuario seleccione un archivo o elija un archivo, la función presente en este controlador de eventos comenzará a ejecutar.

Dentro de la función del controlador de eventos primero, inicializamos el FileReader () Objeto con la nueva palabra clave. Luego al finalizar el filereader Función Simplemente estamos publicando el resultado del archivo leído en la variable FileOutput, que de hecho es la pag etiqueta.

Al final, estamos leyendo el archivo con la ayuda del método incorporado de FileReader que es readastext () y pasar un argumento para mencionar leer el archivo que está en el primer índice. Estamos haciendo esto para que el usuario no seleccione múltiples archivos e incluso si seleccionó múltiples archivos, entonces el FileReader solo leerá el primer archivo entre ellos.

Seleccionemos ahora un archivo. Para ese propósito, he creado un texto documentar y escribir dos líneas en ese archivo. La salida del contenido del archivo se proporciona a continuación:

Seleccionemos ahora este archivo de HTML y vea si podemos ver el contenido del archivo o no:

Hemos elegido con éxito un archivo y leemos su contenido y luego imprimimos ese contenido.

Conclusión

HTML5 proporciona una API de FileReader a través de la cual podemos leer el contenido del archivo. La API de FileReader nos ofrece cuatro métodos creados que podemos usar para leer un archivo de la forma en que queremos. ReadAsArrayBuffer () lee un archivo y devuelve un ArrayBuffer del contenido del archivo, ReadAsDataurl () lee el archivo y devuelve una URL que tiene contenido del archivo Read, ReadAsBinaryString () Read un archivo y devuelve datos binarios sin procesar del archivo de Read y Read. El último es el readastext () que lee un archivo y devuelve el contenido del archivo de lectura como una cadena de texto que está en forma legible por humanos.

En esta publicación, discutimos cómo leer un archivo local en JavaScript implementando primero cómo seleccionar un archivo local usando HTML, y luego, cuando seleccionamos ese archivo, leemos el contenido del archivo usando JavaScript.