JavaScript Academy · Lección

Lectura de archivos con FileReader

Lea archivos seleccionados como texto o URL de datos.

Lectura de archivos con FileReader es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué es FileReader?

FileReader es una API del navegador que lee de forma asíncrona el contenido de objetos File y Blob. Puede obtener un archivo de un elemento <input type="file"> y leerlo como texto, una URL de datos o datos binarios.

Obtención de un archivo desde un input

Un input de tipo archivo expone una lista files. El primer archivo seleccionado se encuentra en el índice 0 y tiene propiedades útiles como name, size y type.

const input = document.querySelector('#picker');
const file = input.files[0];

console.log(file.name);
console.log(file.size);
console.log(file.type);

La lectura es asíncrona

FileReader no devuelve los datos directamente. Asigne un controlador onload y después llame a un método de lectura. El resultado llegará más tarde en reader.result.

const reader = new FileReader();
reader.onload = function () {
  console.log('done reading');
  console.log(reader.result);
};
reader.readAsText(file);

readAsText

readAsText decodifica el archivo como una cadena de texto, ideal para archivos .txt, .csv o JSON.

const reader = new FileReader();
reader.onload = () => {
  console.log('contents:', reader.result);
};
reader.readAsText(textFile);

readAsDataURL

readAsDataURL produce una URL de datos data: en base64. Es perfecta para previsualizar una imagen asignándola a un img.src.

const reader = new FileReader();
reader.onload = () => {
  const img = document.querySelector('#preview');
  img.src = reader.result;
  console.log(reader.result.slice(0, 30));
};
reader.readAsDataURL(imageFile);

readAsArrayBuffer

readAsArrayBuffer proporciona datos binarios sin procesar como un ArrayBuffer, lo que resulta útil para analizar formatos de archivo byte a byte.

const reader = new FileReader();
reader.onload = () => {
  const bytes = new Uint8Array(reader.result);
  console.log('byte count:', bytes.length);
  console.log('first byte:', bytes[0]);
};
reader.readAsArrayBuffer(binaryFile);

Gestión de errores

Asigne un controlador onerror para detectar errores de lectura, por ejemplo, cuando no se puede leer un archivo.

const reader = new FileReader();
reader.onerror = () => {
  console.log('read failed:', reader.error.name);
};
reader.onload = () => console.log('ok');
reader.readAsText(file);

Seguimiento del progreso

En archivos grandes, el evento onprogress indica cuántos bytes se han cargado hasta el momento, lo que resulta útil para las barras de progreso.

const reader = new FileReader();
reader.onprogress = (event) => {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    console.log('loaded ' + percent.toFixed(0) + '%');
  }
};
reader.readAsArrayBuffer(bigFile);

Envoltorio en una Promise

La API basada en eventos resulta poco práctica. Envuélvala en una Promise para poder usar await y escribir un código más limpio.

function readText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsText(file);
  });
}

readText(file).then(text => console.log(text));

Alternativa moderna: file.text()

Los navegadores modernos permiten llamar directamente a file.text(), file.arrayBuffer() o file.stream(), que devuelven Promises. En muchos casos, son más sencillos que FileReader.

async function show(file) {
  const text = await file.text();
  console.log(text);
}

show(file);

Por qué es importante FileReader

FileReader permite procesar completamente en el navegador los archivos seleccionados por el usuario: previsualizar imágenes, analizar archivos CSV o validar cargas antes de enviarlas. Elija el método de lectura según los datos que necesite: texto, URL de datos o datos binarios. A continuación, explorará los Blobs y las URL de objeto.

const reader = new FileReader();
reader.onload = () => console.log('ready to upload');
reader.readAsDataURL(file);

Comprobación rápida

¿Qué método de FileReader proporciona una cadena en base64 adecuada para el src de una vista previa de imagen?

Repaso: lectura de archivos

Ha aprendido a leer el contenido de los archivos:

Obtenga los archivos desde input.files; la lectura es asíncrona mediante onload.
readAsText, readAsDataURL y readAsArrayBuffer devuelven formatos diferentes.
Gestione onerror y onprogress para mejorar la robustez.
Los métodos modernos file.text() y file.arrayBuffer() son alternativas basadas en Promise.

Preguntas frecuentes

¿La lección «Lectura de archivos con FileReader» es gratis?

Sí — el texto completo de «Lectura de archivos con FileReader» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Lectura de archivos con FileReader»?

Lea archivos seleccionados como texto o URL de datos. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Lectura de archivos con FileReader»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy