JavaScript Academy · Leçon

Lire des fichiers avec FileReader

Lisez les fichiers sélectionnés sous forme de texte ou d’URL de données.

Lire des fichiers avec FileReader est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Qu’est-ce que FileReader ?

FileReader est une API de navigateur qui lit de manière asynchrone le contenu des objets File et Blob. Vous récupérez un fichier depuis un <input type="file"> et le lisez sous forme de texte, d’URL de données ou de données binaires.

Récupérer un fichier depuis un champ de saisie

Un champ de sélection de fichier expose une liste files. Le premier fichier sélectionné se trouve à l’index 0 et possède des propriétés utiles comme name, size et type.

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

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

La lecture est asynchrone

FileReader ne renvoie pas directement les données. Vous lui associez un gestionnaire de chargement, puis appelez une méthode de lecture. Le résultat arrive plus tard dans reader.result.

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

readAsText

readAsText décode le fichier sous forme de chaîne de texte, ce qui convient parfaitement aux fichiers .txt, .csv ou JSON.

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

readAsDataURL

readAsDataURL produit une URL de données data: encodée en base64. C’est idéal pour prévisualiser une image en l’assignant à 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 fournit les données binaires brutes sous forme d’un ArrayBuffer, ce qui est utile pour analyser les formats de fichier octet par octet.

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);

Gérer les erreurs

Associez un gestionnaire d’erreur pour intercepter les échecs de lecture, par exemple lorsqu’un fichier est illisible.

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

Suivre la progression

Pour les fichiers volumineux, l’événement de progression indique le nombre d’octets déjà chargés, ce qui est utile pour les barres de progression.

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);

Encapsuler dans une promesse

L’API fondée sur les événements est peu pratique. Encapsulez-la dans une promesse afin de pouvoir utiliser await et d’obtenir un code plus clair.

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));

Alternative moderne : file.text()

Les navigateurs modernes vous permettent d’appeler directement file.text(), file.arrayBuffer() ou file.stream(), qui renvoient des promesses. Ces méthodes sont plus simples que FileReader dans de nombreux cas.

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

show(file);

Pourquoi FileReader est important

FileReader vous permet de traiter entièrement dans le navigateur les fichiers sélectionnés par l’utilisateur : prévisualiser des images, analyser des fichiers CSV ou valider des téléversements avant leur envoi. Choisissez la méthode de lecture en fonction des données dont vous avez besoin : texte, URL de données ou données binaires. Ensuite, vous découvrirez les objets binaires et les URL d’objet.

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

Vérification rapide

Quelle méthode de FileReader vous fournit une chaîne base64 adaptée à la prévisualisation d’une image dans src ?

Récapitulatif : lire des fichiers

Vous avez appris à lire le contenu des fichiers :

Récupérez les fichiers avec input.files ; la lecture est asynchrone via onload.
readAsText, readAsDataURL et readAsArrayBuffer renvoient des formats différents.
Gérez onerror et onprogress pour rendre votre code plus robuste.
Les méthodes modernes file.text() et file.arrayBuffer() sont des alternatives fondées sur les promesses.

Questions Fréquemment Posées

La leçon « Lire des fichiers avec FileReader » est-elle gratuite ?

Oui — le texte complet de « Lire des fichiers avec FileReader » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Lire des fichiers avec FileReader » ?

Lisez les fichiers sélectionnés sous forme de texte ou d’URL de données. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Lire des fichiers avec FileReader » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy