Comment lire les fichiers locaux en javascript
Il existe plusieurs façons d'ouvrir et de lire des fichiers locaux en javascrip -"FS" API, ou en utilisant l'attribut de fichier HTML SELECT du
Étiqueter, ou même utiliser un package externe, puis essayer sa méthode.
Ainsi, dans cet article, nous vous montrerons comment lire les fichiers locaux en javascript en utilisant le API FS et en utilisant
L'attribut de fichier HTML Select.
API HTML5 FileReader
HTML5 a introduit un mécanisme cohérent pour traiter les fichiers locaux en introduisant le API du lecteur de fichiers spécification. Le API du lecteur de fichiers Peut être utilisé pour fournir un aperçu des photos de photos lorsqu'ils sont transmis à un serveur ainsi que pour permettre à une application Web de stocker une référence de fichier même si l'utilisateur n'est pas connecté à Internet. En utilisant les gestionnaires d'événements de JavaScript et l'API du lecteur de fichiers, nous pouvons lire de manière asynchrone un fichier.
Le lecteur de fichiers API nous offre quatre méthodes intégrées que nous pouvons utiliser pour lire les fichiers de manière asynchrone. La première méthode intégrée est le Chef de file.readasarraybuffer () qui lit un contenu de fichier local mais renvoie un arraybuffer qui a le contenu de fichier. Vient ensuite le Chef de file.readasdataurl () qui renvoie une URL des données d'un fichier local.
Le Chef de file.readasbinarystring () Renvoie le contenu du fichier local dans un format de chaîne et la méthode intégrée la plus utilisée de FileReader est le Chef de file.readastext () qui renvoie le contenu du fichier local dans un format de chaîne de texte ou nous pouvons dire sous une forme lisible par l'homme.
Maintenant que nous savons ce qu'est l'API FileReader, définissons l'environnement HTML pour qu'un utilisateur sélectionne un fichier qu'il / elle souhaite que le navigateur lise.
Fichier HTML Select
HTML est un langage de balisage hypertexte qui est utilisé pour donner une structure à nos pages Web. Nous utiliserons HTML pour faire en sorte que l'utilisateur sélectionne un fichier, puis nous utiliserons JavaScript pour lire le contenu du fichier. Le code HTML est donné ci-dessous:
Dans le code ci-dessus, nous avons initialisé un saisir Tag avec le type de déposer Et étant donné l'attribut identifiant qui sera utilisé pour référencer cet élément dans notre fichier javascript. Ensuite, nous avons initialisé un p TAG dans laquelle notre contenu du fichier sera publié une fois que l'utilisateur sélectionnera un fichier. En fin de compte, nous utilisons le scénario avec l'attribut SRC dans lequel nous avons fait référence à un fichier code.js qui contiendra notre code javascript.
JavaScript Lire la fonctionnalité du fichier
Nous avons terminé avec HTML, alors passons maintenant à JavaScript pour atteindre notre objectif de lire un fichier en javascript. À cette fin, nous utiliserons la méthode intégrée de l'API du lecteur de fichiers readastext (). Le code JavaScript est donné ci-dessous:
var myfile = document.getElementByid ("myfile");var fileoutput = document.getElementById ("FileOutput");
mon fichier.addEventListener ('change', function ()
var fileReader = new fileReader ();
chef de file.onload = function ()
fileoutput.textContent = fileader.résultat;
chef de file.readastext (ceci.fichiers [0]);
)
Dans le code ci-dessus, nous obtenons d'abord la référence du fichier d'entrée et du p Tag que nous avons défini dans le HTML en utilisant leur attribut ID. Ensuite, nous avons ajouté un écouteur d'événements de modification afin que chaque fois qu'un utilisateur sélectionne un fichier ou choisit un fichier, la fonction présente dans ce gestionnaire d'événements commencera à exécuter.
À l'intérieur de la fonction du gestionnaire d'événements en premier, nous avons initialisé le FileReader () Objet avec le nouveau mot-clé. Puis à la fin du chef de file fonction Nous publions simplement le résultat du fichier lu dans la variable FileOutput qui est en effet le p étiqueter.
En fin de compte, nous lisons le fichier à l'aide de la méthode intégrée de FileReader qui est readastext () et passer un argument pour mentionner la lecture du fichier qui est sur le premier index. Nous le faisons pour que l'utilisateur ne sélectionne pas plusieurs fichiers et même s'il a sélectionné plusieurs fichiers, le FileReader lira simplement le premier fichier parmi eux.
Laissez-nous maintenant sélectionner un fichier. À cette fin, j'ai créé un texte documenter et rédiger deux lignes dans ce fichier. La sortie du contenu du fichier est donnée ci-dessous:
Laissez maintenant sélectionner ce fichier dans HTML et voyons si nous pouvons voir le contenu du fichier ou non:
Nous avons réussi à choisir un fichier et à lire son contenu, puis à imprimer ce contenu.
Conclusion
HTML5 fournit une API FileReader à travers laquelle nous pouvons lire le contenu du fichier. L'API FileReader nous donne quatre méthodes construites que nous pouvons utiliser pour lire un fichier comme nous le souhaitons. Le readasArrayBuffer () lit un fichier et renvoie un arraybuffer du contenu du fichier, readasdataurl () lit le fichier et renvoie une URL qui a du contenu du fichier de lecture, readasbinarystring () Lire un fichier et renvoie les données binaires brutes du fichier de lecture et Le dernier est le readastext () qui lit un fichier et renvoie le contenu du fichier de lecture en tant que chaîne de texte qui est sous forme lisible par l'homme.
Dans cet article, nous avons discuté de la façon de lire un fichier local dans JavaScript en implémentant d'abord comment sélectionner un fichier local à l'aide de HTML, puis lorsque nous sélectionnons ce fichier, nous lisons le contenu du fichier à l'aide de JavaScript.