Cómo trabajar con archivos en JavaScript usando la API de FileReader | Explicado con ejemplos
Leer un archivo y leer sus datos se puede hacer de múltiples maneras, pero a veces es mejor usar el objeto \ API que es compatible con casi todos los navegadores web. Es por eso que la API de FileReader es uno de los objetos más utilizados de Vanilla JavaScript para leer el contenido de un archivo.
Objeto del lector de archivos
Para crear un nuevo objeto de lector de archivos, primero debe llamar al FileReader () constructor utilizando el "nuevo" palabra clave. Después de eso, puede comenzar a usar las diversas funciones de este objeto. Para obtener más información sobre este constructor, puede visitar los documentos oficiales por el MDN haciendo clic aquí.
Métodos del lector de archivos
El objeto del lector de archivos viene con muchos métodos diferentes que nos ayudan a analizar los datos del archivo que estamos leyendo. Algunos de los métodos son ejecutados automáticamente por los navegadores y se denominan métodos del controlador de eventos, por ejemplo, el "Onload ()" El método se invoca automáticamente una vez que el lector de archivos ha terminado de leer el contenido del archivo.
Para acceder a los métodos del objeto del lector de archivos, utiliza un operador de puntos " .". Algunos de los métodos y variables a las que se puede acceder utilizando el objeto del lector de archivos son ::
- objeto. Resultado: se usa para obtener el contenido del archivo que se leyó
- objeto.ReadEteTxt: lee el contenido del archivo y los analiza como un texto
- objeto.Abortar: aborta la operación de lectura actual
Y mucho más que se puede leer en la página web de su documentación oficial.
Ejemplo del lector de archivos
Para demostrar el uso de la API del lector de archivos, necesitaremos una página web HTML con un campo de entrada del type = "archivo", Podemos crear esto utilizando la siguiente línea en el archivo HTML:
Esto nos dará la siguiente página web:
Nota: No usamos ningún atributo de identificación o clase en el campo de entrada, ya que nos referiremos a nuestro campo de entrada utilizando el selector de consultas.
Para el código JavaScript, lo primero que vamos a hacer es seleccionar el campo de entrada usando el selector de consultas:
const entrada = documento.QuerySelector ('input [type = "file"]');A continuación, vamos a agregar un oyente de eventos de "cambiar" En nuestra variable aporte, Eso llamará a una función para cargar el contenido del archivo utilizando la siguiente línea:
aporte.addEventListener ("Change", function (e), FALSO);
Este oyente de eventos de función se ejecutará cada vez que etiqueta de entrada Carga un archivo, podemos acceder al archivo utilizando el "aporte.archivo" formación. Para mostrar los detalles del archivo cargado, podemos usar la siguiente línea:
consola.Registro (entrada.archivos [0])Obtenemos la siguiente salida en nuestra consola:
Dentro de la función, vamos a crear nuestro objeto de lector de archivos usando la línea:
const lector = new FileReader ();El archivo que quiero leer es un archivo de texto, así que aquí voy a usar el método readastext del objeto del lector de archivos para analizar el contenido de los archivos como datos textuales utilizando las siguientes líneas:
lector.ReadEteText (entrada.archivos [0]);Ahora, podemos acceder al contenido del archivo que leemos y analizamos utilizando el lector.resultado. El Onload () El método se llama automáticamente cuando el objeto del lector de archivos ha terminado de leer el archivo, para que podamos mostrar el contenido del archivo una vez que se termine de leer utilizando los siguientes comandos:
lector.onload = function ()consola.Registro (lector.resultado);
;
El fragmento de código completo es:
const entrada = documento.QuerySelector ('input [type = "file"]');aporte.addEventListener (
"cambiar",
función (e)
consola.Registro (entrada.archivos [0]);
const lector = new FileReader ();
lector.ReadEteText (entrada.archivos [0]);
lector.onload = function ()
consola.Registro (lector.resultado);
;
,
FALSO
);
Ejecute el archivo y seleccione un archivo de texto en su máquina local como esta:
Observará el siguiente resultado en su consola:
Y ahí tienes, has leído el contenido del archivo y los imprimiste en la consola.
Trabajando con una imagen
Para leer una imagen y mostrarla en la consola, primero debe leer el archivo con el readasdataurl Usando la siguiente línea:
lector.ReadAsdataurl (entrada.archivos [0]);Y para mostrar la imagen en su página web, debe crear una nueva variable de imagen dentro del Onload () función usando las siguientes líneas:
lector.onload = function ()const img = nueva imagen ();
;
,
Y luego dentro de esto encendido función, establecerá la fuente de la variable de imagen que creamos igual al resultado del objeto del lector de archivos:
img.src = lector.resultado;Y por último, vamos a agregar esta variable de imagen al documento utilizando la siguiente línea:
documento.cuerpo.appendchild (img);El fragmento de código completo es:
const entrada = documento.QuerySelector ('input [type = "file"]');aporte.addEventListener (
"cambiar",
función (e)
consola.Registro (entrada.archivos [0]);
const lector = newFilereader ();
lector.ReadAsdataurl (entrada.archivos [0]);
lector.onload = function ()
constimg = nueva imagen ();
img.src = lector.resultado;
documento.cuerpo.appendchild (img);
;
,
FALSO
);
Al ejecutar el archivo, tendrá la siguiente salida:
Y ahí va, ahora sabe cómo trabajar con la API del lector de archivos para leer archivos en su máquina local
Conclusión
La API del lector de archivos viene como una API incorporada con Vanilla JavaScript y es compatible con casi todos los navegadores web. Esta API del lector de archivos nos devuelve un objeto de lector de archivos que podemos usar para leer el contenido del archivo seleccionando el método de análisis. En esta publicación, aprendimos sobre la API del lector de archivos, el objeto del lector de archivos y cómo usar el objeto del lector de archivos para leer archivos de texto, así como archivos de imagen. Incluso mostramos la imagen en el navegador web agregándola al documento.