Lokale Textdatei mit JavaScript öffnen
-
Verwenden Sie JavaScript
FileReader(), um eine lokale Textdatei zu öffnen -
Verwendung von JavaScript
FileReader()undjQueryzum Öffnen einer lokalen Textdatei -
Verwendung von JavaScript
PromiseundFileReaderzum Öffnen einer lokalen Textdatei
Unser Ziel ist es, Sie über verschiedene Techniken und Methoden zu informieren, die Sie verwenden können, um eine lokale Textdatei mit JavaScript zu öffnen. Es demonstriert auch die Verwendung von FileReader(), Promise und verschiedenen jQuery-Funktionen und -Ereignissen, um eine Textdatei von Ihrem System zu lesen.
Verwenden Sie JavaScript FileReader(), um eine lokale Textdatei zu öffnen
HTML Quelltext:
<!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>
CSS-Code:
input[type=file]{
width:90px;
color:transparent;
}
JavaScript-Code:
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]);
})
Ausgabe:
Dieser Code druckt den Inhalt der ausgewählten Datei (Eingabedatei) so, wie er in der Eingabedatei geschrieben ist.
Die Methode showSelectedFile() zeigt den Pfad der Eingabedatei. Dann wird das Element ausgewählt, dessen ID-Wert inputfile ist.
Der Ereignis-Listener hört auf die Eingabe auf Änderungen. Hier wird es geändert, wenn Datei(en) ausgewählt werden.
Sobald es geändert wird, läuft eine anonyme Funktion, die mit dem Konstruktor FileReader() ein FileReader-Objekt erzeugt und es fr nennt. Mit fr können wir auf verschiedene Funktionen und Attribute von FileReader() zugreifen. Diese Funktion liest den Textinhalt und zeigt ihn im Browser an.
Die .onload wird verwendet, um eine bestimmte Funktion zu starten. In unserem Fall wählt diese Funktion das erste Element mit der ID als Ausgabe und setzt seine Eigenschaft .textContent auf den Wert .result.
.textContent liest den Inhalt des aktuellen Elements (Knoten) und seiner untergeordneten Elemente. .readAsText() liest den Inhalt der angegebenen Eingabedatei. Sobald der gesamte Inhalt gelesen wurde, enthält das Attribut result diesen Inhalt als Zeichenfolge.
Die FileList wird von der Eigenschaft files des Elements input zurückgegeben. In diesem Beispiel wird davon ausgegangen, dass this ein input-Element ist, das das Dateiobjekt am Index Null (this.files[0]) zurückgibt.
Verwendung von JavaScript FileReader() und jQuery zum Öffnen einer lokalen Textdatei
HTML-Code:
<!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>
JavaScript-Code:
$(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);
});
});
Ausgabe:
Hey,
Are you learning about how to open a local text file using JavaScript?
Dieser Beispielcode druckt auch den Inhalt für die Eingabedatei so, wie er in die Datei (Eingabedatei) geschrieben wird.
Das Ereignis ready() wird ausgelöst, wenn das Document Object Model (DOM) vollständig geladen ist. Um es leicht zu verstehen, kann man sagen, dass es eine Methode zugänglich macht, nachdem das Dokument geladen wurde.
Das Ereignis change() wird verwendet, um zu wissen, ob sich der Wert des Elements geändert hat. Wir können das Ereignis change() nur mit den Elementen input, textarea und select verwenden. Es kann entweder das change()-Ereignis auslösen oder eine Funktion auf das change()-Ereignis ausführen.
.html() ist sehr nützlich, wenn Sie den innerHTML (Inhalt) der ausgewählten Elemente zurückgeben oder setzen möchten.
Jetzt denken Sie vielleicht darüber nach, wie das innerHTML geändert wird? Dies liegt daran, dass auf das Attribut result von FileReader abgezielt wird.
Sehen Sie sich den folgenden Screenshot an (orange umrandet).
Die .onload, .result, .readAsText() wurden bereits im vorherigen Abschnitt erklärt. Sie können dorthin gehen, um einen Blick darauf zu werfen, oder diesen Link überprüfen, um im Detail zu lesen.
Sie können File-System verwenden, um eine lokale Textdatei zu lesen (wenn Sie in Node Environment codieren).
Verwendung von JavaScript Promise und FileReader zum Öffnen einer lokalen Textdatei
HTML Quelltext:
<!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>
JavaScript-Code:
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]);
}
Ausgabe:
Hey,
Are you learning about how to open a local text file using JavaScript?
In diesem Beispielcode wird die Funktion readInputFile() ausgeführt, sobald die Eingabedatei ausgewählt wird. Diese Funktion wartet (unter Verwendung des await-Operators) auf die Erfüllung des Promise und gibt den erwarteten Wert zurück (falls aufgelöst).
Außerdem wird der Inhalt (innerHTML) des Elements mit der ID output durch den von Promise zurückgegebenen Wert ersetzt. Der await-Operator wird verwendet, um auf das Promise zu warten, es ist ein Objekt, das das Bestehen oder Nichtbestehen einer asynchronen Funktion und ihren jeweiligen Wert darstellt. Es hat drei Zustände mit den Namen resolve, reject und pending.
