Ouvrir un fichier texte local à l'aide de JavaScript
-
Utilisez JavaScript
FileReader()pour ouvrir un fichier texte local -
Utilisez JavaScript
FileReader()etjQuerypour ouvrir un fichier texte local -
Utilisez JavaScript
PromiseetFileReaderpour ouvrir un fichier texte local
Notre objectif est de vous guider sur les différentes techniques et méthodes que vous pouvez utiliser pour ouvrir un fichier texte local à l’aide de JavaScript. Il démontre également l’utilisation de FileReader(), Promise et différentes fonctions et événements jQuery pour lire un fichier texte à partir de votre système.
Utilisez JavaScript FileReader() pour ouvrir un fichier texte local
Code HTML:
<!DOCTYPE html>
<html>
<head>
<title>Read Text File</title>
</head>
<body>
<input id='selectedfile' type='text' name='selectedfile'>
<input id='inputfile' type='file' name='inputfile' onChange='showSelectedFile()'>
<br><br>
<pre id="output"></pre>
</body>
</html>
Code CSS :
input[type=file]{
width:90px;
color:transparent;
}
Code JavaScript :
function showSelectedFile() {
selectedfile.value = document.getElementById('inputfile').value;
}
document.getElementById('inputfile').addEventListener('change', function() {
var fr = new FileReader();
fr.onload = function() {
document.getElementById('output').textContent = fr.result;
} fr.readAsText(this.files[0]);
})
Production :
Ce code imprime le contenu du fichier sélectionné (fichier d’entrée) tel qu’il est écrit dans le fichier d’entrée.
La méthode showSelectedFile() affiche le chemin du fichier d’entrée. Ensuite, l’élément dont la valeur d’id est inputfile est sélectionné.
Le écouteur d’événement écoute input pour les changements. Ici, il est modifié lorsque le ou les fichiers sont choisis.
Dès qu’il est modifié, une fonction anonyme s’exécute qui crée un objet FileReader à l’aide du constructeur FileReader et le nomme fr. En utilisant fr, nous pouvons accéder aux différentes fonctions et attributs de FileReader. Cette fonction lit le contenu du texte et l’affiche dans le navigateur.
Le .onload sert à lancer une fonction particulière. Dans notre cas, cette fonction sélectionne le premier élément ayant id comme output et définit sa propriété .textContent avec la valeur de .result.
.textContent lit le contenu de l’élément actuel (nœud) et de ses éléments descendants. .readAsText() lit le contenu du fichier d’entrée donné. Une fois qu’il a lu tout le contenu, l’attribut result a ce contenu sous forme de chaîne.
La FileList est retournée par la propriété files de l’élément input. Dans cet exemple, on suppose que this est un élément input qui renvoie l’objet file à l’index zéro (this.files[0]).
Utilisez JavaScript FileReader() et jQuery pour ouvrir un fichier texte local
Code HTML:
<!DOCTYPE html>
<html>
<head>
<title>Read Text File</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<input type="file" name="inputfile" id="inputfile">
<br><br>
<pre id="output"></pre>
</body>
</html>
Code JavaScript :
$(document).ready(function() {
$('#inputfile').change(function() {
var file = this.files[0];
var fr = new FileReader();
fr.onload = function(data) {
$('#output').html(data.target.result);
} fr.readAsText(file);
});
});
Production :
Hey,
Are you learning about how to open a local text file using JavaScript?
Cet exemple de code imprime également le contenu du fichier d’entrée tel qu’il est écrit dans le fichier (fichier d’entrée).
L’événement ready() se déclenche lorsque le modèle d’objet de document (DOM) est entièrement chargé. Pour comprendre facilement, on peut dire que cela rend une méthode accessible après le chargement du document.
L’événement change() permet de savoir si la valeur de l’élément est modifiée. Nous ne pouvons utiliser l’événement change() qu’avec les éléments input, textarea et select. Il peut soit déclencher l’événement change() soit exécuter une fonction sur l’événement change().
.html() est très utile si vous voulez retourner ou définir le innerHTML (contenu) des éléments choisis.
Maintenant, vous pourriez penser à la façon dont le innerHTML est modifié ? Cela est dû au ciblage de l’attribut result de FileReader.
Jetez un oeil à la capture d’écran suivante (décrite en orange).
Les .onload, .result, .readAsText() sont déjà expliqués dans la section précédente. Vous pouvez y aller pour y jeter un œil ou consulter ce lien pour lire en détail.
Vous pouvez utiliser File-System pour lire un fichier texte local (si vous codez sur Node Environment).
Utilisez JavaScript Promise et FileReader pour ouvrir un fichier texte local
Code HTML:
<!DOCTYPE html>
<html>
<head>
<title>Read Text File</title>
</head>
<body>
<input type="file" onchange="readInputFile(this)"/>
<h3>File Content:</h3>
<pre id="output"></pre>
</body>
</html>
Code JavaScript :
function readFile(file) {
return new Promise((resolve, reject) => {
let freader = new FileReader();
freader.onload = x => resolve(freader.result);
freader.readAsText(file);
})
}
async function readInputFile(input) {
output.innerText = await readFile(input.files[0]);
}
Production :
Hey,
Are you learning about how to open a local text file using JavaScript?
Dans cet exemple de code, la fonction readInputFile() s’exécute dès que le fichier d’entrée est sélectionné. Cette fonction attendra (en utilisant l’opérateur wait) que la Promise soit remplie et retournera la valeur attendue (si résolue).
De plus, le contenu (innerHTML) de l’élément ayant l’id output sera remplacé par la valeur retournée par Promise. L’opérateur wait est utilisé pour attendre la Promise, c’est un objet qui représente le succès ou l’échec d’une fonction asynchrone et sa valeur respective. Il a trois états nommés resolve, reject, et pending.
