Comment afficher le contenu d'un fichier en JavaScript ?
Bonjour, comment puis-je faire pour afficher dans un textarea le contenu d'un fichier qui a été envoyé via un input file, en JavaScript ?
Pour lire et afficher le contenu d'un fichier, vous pouvez utiliser l'objet JavaScript FileReader, et la méthode readAsText.
Dans l'exemple ci-dessous on récupère le contenu d'un fichier ajouté à un champ du type fichier <input type="file">, puis on écrit son contenu dans un champ texte du type textarea. On détecte par ailleurs les retours chariot et les déclarations de nouvelles lignes (\r\n) que l'on répercute dans le textarea.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment afficher le contenu d'un fichier en JavaScript ?</title>
</head>
<body>
<input id="fichier" type="file">
<br>
<textarea id="affichage" cols="50" rows="20"></textarea>
<script>
let input = document.getElementById("fichier");
let textarea = document.getElementById("affichage");
input.addEventListener('change', () => {
let fichier = input.files;
if (fichier.length == 0) return;
const contenu = fichier[0];
let lecteur = new FileReader();
lecteur.onload = (e) => {
const contenu = e.target.result;
const lignes = contenu.split(/\r\n|\n/);
textarea.value = lignes.join('\n');
};
lecteur.onerror = (e) => alert(e.target.error.name);
lecteur.readAsText(contenu);
});
</script>
</body>
</html>
Remarque : le gros avantage de l'objet FileReader c'est qu'il intègre un gestionnaire d'évènements, ce qui permet entre autre de gérer les éventuelles erreurs.
Vous trouverez d'avantage d'information à ce sujet via cette page du site de Mozilla.