FileReader

Constructor

FileReader()

Devuelve un nuevo objeto FileReader.

Para ver detalles y ejemplos, consulta Uso de archivos desde aplicaciones web.

Propiedades de instancia

FileReader.error Read only

Un objeto DOMException que representa el error que se produjo al leer el archivo.

FileReader.readyState Read only

Un número que indica el estado del FileReader. Su valor es uno de los siguientes:

Nombre	Valor	Descripción
EMPTY	0	Todavía no se han cargado datos.
LOADING	1	Los datos se están cargando en este momento.
DONE	2	Se ha completado toda la solicitud de lectura.

FileReader.result Read only

El contenido del archivo. Esta propiedad solo es válida una vez que la operación de lectura ha terminado, y el formato de los datos depende del método que se haya usado para iniciar la operación de lectura.

Métodos de instancia

FileReader.abort()

Cancela la operación de lectura. Al finalizar, el estado readyState será DONE.

FileReader.readAsArrayBuffer()

Inicia la lectura del contenido del objeto Blob especificado; una vez finalizada, el atributo result contiene un ArrayBuffer que representa los datos del archivo.

FileReader.readAsBinaryString()

Inicia la lectura del contenido del objeto Blob especificado; una vez finalizada, el atributo result contiene los datos binarios sin procesar del archivo como una cadena de texto.

FileReader.readAsDataURL()

Inicia la lectura del contenido del objeto Blob especificado; una vez finalizada, el atributo result contiene una URL data: que representa los datos del archivo.

FileReader.readAsText()

Inicia la lectura del contenido del objeto Blob especificado; una vez finalizada, el atributo result contiene el contenido del archivo como una cadena de texto. Se puede especificar opcionalmente un nombre de codificación.

Eventos

Para detectar estos eventos, usa addEventListener() o asigna un detector de eventos a la propiedad oneventname de esta interfaz. Cuando FileReader ya no se utilice, elimina los detectores de eventos con removeEventListener() para evitar fugas de memoria.

abort

Se dispara cuando se ha abortado una lectura, por ejemplo, porque el programa llamó a FileReader.abort().

error

Se dispara cuando la lectura falla debido a un error.

load

Se dispara cuando una lectura se ha completado con éxito.

loadend

Se dispara cuando una lectura ha finalizado, ya sea con éxito o no.

loadstart

Se dispara cuando ha comenzado una lectura.

progress

Se dispara periódicamente a medida que se leen los datos.

Ejemplos

Uso de FileReader

Este ejemplo lee y muestra el contenido de un archivo de texto directamente en el navegador.

HTML

<h1>Lector de archivos</h1>
<input type="file" id="file-input" />
<div id="message"></div>
<pre id="file-content"></pre>

JavaScript

const fileInput = document.getElementById("file-input");
const fileContentDisplay = document.getElementById("file-content");
const messageDisplay = document.getElementById("message");

fileInput.addEventListener("change", handleFileSelection);

function handleFileSelection(event) {
  const file = event.target.files[0];
  fileContentDisplay.textContent = ""; // Borra el contenido del archivo anterior
  messageDisplay.textContent = ""; // Borra los mensajes anteriores

  // Valida la existencia y el tipo de archivo
  if (!file) {
    showMessage("No se ha seleccionado ningún archivo. Elige uno.", "error");
    return;
  }

  if (!file.type.startsWith("text")) {
    showMessage(
      "Tipo de archivo no compatible. Por favor, selecciona un archivo de texto.",
      "error",
    );
    return;
  }

  // Lee el archivo
  const reader = new FileReader();
  reader.onload = () => {
    fileContentDisplay.textContent = reader.result;
  };
  reader.onerror = () => {
    showMessage(
      "Error al leer el archivo. Por favor, inténtalo de nuevo.",
      "error",
    );
  };
  reader.readAsText(file);
}

// Muestra un mensaje al usuario
function showMessage(message, type) {
  messageDisplay.textContent = message;
  messageDisplay.style.color = type === "error" ? "red" : "green";
}

Resultado

Especificaciones

Compatibilidad con navegadores

Véase también

• Uso de archivos desde aplicaciones web
• File
• Blob
• FileReaderSync