Comment travailler avec des fichiers dans JavaScript à l'aide de l'API FileReader | Expliqué avec des exemples

L'API du lecteur de fichiers fournit le lecteur de fichiers objecT qui peut être utilisé pour lire les fichiers de votre machine locale et utiliser ses données sur votre page Web. Vous pouvez même l'utiliser pour lire un fichier à partir de la machine locale du client, puis transférer ses données sur le serveur.

La lecture d'un fichier et la lecture de ses données peuvent être effectuées de plusieurs manières, mais il est parfois préférable d'utiliser l'objet \ API qui est pris en charge par presque tous les broaders Web. C'est pourquoi l'API FileReader est l'un des objets les plus utilisés de la vanille JavaScript pour lire le contenu d'un fichier.

Objet du lecteur de fichiers

Pour créer un nouvel objet Reader de fichier, vous devez d'abord appeler le FileReader () constructeur utilisant le "nouveau" mot-clé. Après cela, vous pouvez commencer à utiliser les différentes fonctions de cet objet. Pour en savoir plus sur ce constructeur, vous pouvez visiter les documents officiels par le MDN en cliquant ici.

Méthodes de lecteur de fichiers

L'objet de lecteur de fichiers est livré avec de nombreuses méthodes différentes qui nous aident à analyser les données du fichier que nous lisons. Certaines méthodes sont exécutées automatiquement par les navigateurs et sont appelées les méthodes du gestionnaire d'événements, par exemple, le "en charge()" La méthode est automatiquement invoquée une fois le lecteur de fichier terminé en lisant le contenu du fichier.

Pour accéder aux méthodes de l'objet de lecteur de fichiers, vous utilisez un dot-opérateur " .". Certaines des méthodes et variables qui peuvent être accessibles en utilisant l'objet de lecteur de fichiers sont ::

• objet. Résultat: utilisé pour obtenir le contenu du fichier qui a été lu
• objet.readastext: lit le contenu du fichier et les analyse comme un texte
• objet.Aborter: abandonne l'opération de lecture actuelle

Et bien plus qui peut être lu sur la page Web de leur documentation officielle.

Exemple de lecteur de fichiers

Pour démontrer l'utilisation de l'API du lecteur de fichiers, nous aurons besoin d'une page Web HTML avec un champ de saisie du Fichier de type = ", Nous pouvons le créer en utilisant la ligne suivante dans le fichier HTML:

Cela nous donnera la page Web suivante:

Note: Nous n'avons utilisé aucun ID ou attribut de classe dans le champ de saisie car nous ferons référence à notre champ de saisie à l'aide du sélecteur de requête.

Pour le code JavaScript, la première chose que nous allons faire est de sélectionner le champ de saisie à l'aide du sélecteur de requête:

CONS INPUT = DOCUMENT.queySelector ('input [type = "file"]');

Ensuite, nous allons ajouter un auditeur d'événements de "changement" sur notre variable saisir, qui appellera une fonction pour charger le contenu du fichier en utilisant la ligne suivante:

saisir.addEventListener ("change", fonction (e)
, FAUX);

Cet écouteur d'événements de fonction exécutera chaque fois le balise d'entrée charge un fichier, nous pouvons accéder au fichier à l'aide du "saisir.déposer" déployer. Pour afficher les détails du fichier chargé, nous pouvons utiliser la ligne suivante:

console.journal (entrée.Fichiers [0])

Nous obtenons la sortie suivante sur notre console:

À l'intérieur de la fonction, nous allons créer notre objet de lecteur de fichiers à l'aide de la ligne:

const Reader = new FileReader ();

Le fichier que je veux lire est un fichier texte, donc je vais utiliser la méthode readastext de l'objet de lecteur de fichiers pour analyser le contenu des fichiers sous forme de données textuelles à l'aide des lignes suivantes:

lecteur.readastext (entrée.fichiers [0]);

Maintenant, nous pouvons accéder au contenu du fichier que nous lisons et analysés en utilisant le lecteur.résultat. Le en charge() La méthode est automatiquement appelée lorsque l'objet de lecteur de fichier est terminé en lisant le fichier, afin que nous puissions afficher le contenu du fichier une fois qu'il a fait la lecture en utilisant les commandes suivantes:

lecteur.onload = function ()
console.journal (lecteur.résultat);
;

L'extrait de code complet est:

CONS INPUT = DOCUMENT.queySelector ('input [type = "file"]');
saisir.addEventListener (
"changement",
fonction (e)
console.journal (entrée.fichiers [0]);
const Reader = new FileReader ();
lecteur.readastext (entrée.fichiers [0]);
lecteur.onload = function ()
console.journal (lecteur.résultat);
;
,
FAUX
));

Exécutez le fichier et sélectionnez un fichier texte sur votre machine locale comme ceci:

Vous observerez le résultat suivant sur votre console:

Et voilà, vous avez lu le contenu du fichier et les avez imprimés sur la console.

Travailler avec une image

Pour lire une image et l'afficher sur la console, vous devez d'abord lire le fichier avec le readasdataurl Utilisation de la ligne suivante:

lecteur.readasdataurl (entrée.fichiers [0]);

Et pour afficher l'image de votre page Web, vous devez créer une nouvelle variable d'image à l'intérieur du en charge() Fonction en utilisant les lignes suivantes:

lecteur.onload = function ()
const img = new image ();
;
,

Et puis à l'intérieur en charge Fonction, vous allez définir la source de la variable d'image que nous avons créée égale au résultat de l'objet de lecteur de fichiers:

IMG.src = lecteur.résultat;

Et enfin, nous allons ajouter cette variable d'image au document en utilisant la ligne suivante:

document.corps.appenchild (IMG);

L'extrait de code complet est:

CONS INPUT = DOCUMENT.queySelector ('input [type = "file"]');
saisir.addEventListener (
"changement",
fonction (e)
console.journal (entrée.fichiers [0]);
const Reader = newFileReader ();
lecteur.readasdataurl (entrée.fichiers [0]);
lecteur.onload = function ()
consttimg = new image ();
IMG.src = lecteur.résultat;
document.corps.appenchild (IMG);
;
,
FAUX
));

Lors de l'exécution du fichier, vous aurez la sortie suivante:

Et voilà, maintenant vous savez comment travailler avec l'API du lecteur de fichiers pour lire des fichiers sur votre machine locale

Conclusion

L'API du lecteur de fichiers est disponible en API intégrée avec JavaScript Vanilla et est prise en charge par presque tous les navigateurs Web. Cette API de lecteur de fichiers nous renvoie un objet de lecteur de fichiers que nous pouvons utiliser pour lire le contenu du fichier en sélectionnant la méthode d'analyse. Dans cet article, nous avons appris l'API du lecteur de fichiers, l'objet de lecteur de fichiers et comment utiliser l'objet de lecteur de fichiers pour lire les fichiers texte ainsi que les fichiers image. Nous avons même affiché l'image sur le navigateur Web en l'ajoutant dans le document.