Wie kann man eine lokale Textdatei im Browser lesen?

Question

Ich versuche, einen einfachen Text-Datei-Leser zu implementieren, indem Sie eine Funktion erstellen, die in den Pfad der Datei nimmt und konvertiert jede Zeile Text in ein Char-Array, aber es funktioniert nicht.

function readTextFile() {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", "testing.txt", true);
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4) {
      var allText = rawFile.responseText;
      document.getElementById("textSection").innerHTML = allText;
    }
  }
  rawFile.send();
}

Was läuft hier schief?

Dies scheint immer noch nicht zu funktionieren, nachdem ich den Code ein wenig von einer vorherige Revision und jetzt bekomme ich eine XMLHttpRequest Ausnahme 101.

Ich habe dies mit Firefox getestet und es funktioniert, aber in Google Chrome funktioniert es einfach nicht und ich erhalte immer eine Exception 101. Wie kann ich dies nicht nur in Firefox, sondern auch in anderen Browsern (insbesondere Chrome) zum Laufen bringen?

Answer 1

Sie müssen auf den Status 0 prüfen (wie beim lokalen Laden von Dateien mit XMLHttpRequest erhalten Sie keinen Status zurück, da er nicht von einer Webserver )

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

Und angeben file:// in Ihrem Dateinamen:

readTextFile("file:///C:/your/path/to/file.txt");

Answer 2

Nach der Einführung von Api abrufen in Javascript, könnte das Lesen von Dateiinhalten nicht einfacher sein.

Lesen einer Textdatei

fetch('file.txt')
  .then(response => response.text())
  .then(text => console.log(text))
  // outputs the content of the text file

Lesen einer json-Datei

fetch('file.json')
  .then(response => response.json())
  .then(jsonResponse => console.log(jsonResponse))     
   // outputs a javascript object from the parsed json

Update 30/07/2018 (Haftungsausschluss):

Diese Technik funktioniert gut in Firefox aber es scheint, dass Chrom 's fetch Implementierung nicht unterstützt file:/// URL-Schema zum Zeitpunkt der Erstellung dieses Updates (getestet in Chrome 68).

Update-2 (Haftungsausschluss):

Diese Technik funktioniert nicht bei Firefox ab Version 68 (9. Juli 2019) aus demselben (Sicherheits-)Grund wie Chrome: CORS request not HTTP . Siehe https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp .

Answer 3

Besuchen Sie Javascripture ! Und gehen Sie den Abschnitt readAsText und probieren Sie das Beispiel aus. Sie werden wissen, wie die readAsText Funktion von FileReader funktioniert.

var openFile = function(event) {
  var input = event.target;

  var reader = new FileReader();
  reader.onload = function() {
    var text = reader.result;
    var node = document.getElementById('output');
    node.innerText = text;
    console.log(reader.result.substring(0, 200));
  };
  reader.readAsText(input.files[0]);
};

<input type='file' accept='text/plain' onchange='openFile(event)'><br>
<div id='output'>
  ...
</div>

Answer 4

var input = document.getElementById("myFile");
var output = document.getElementById("output");

input.addEventListener("change", function () {
  if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();

    reader.addEventListener('load', function (e) {
      output.textContent = e.target.result;
    });

    reader.readAsBinaryString(myFile);
  }   
});

<input type="file" id="myFile">
<hr>
<textarea style="width:500px;height: 400px" id="output"></textarea>

Answer 5

Moderne Lösung:

Verwenden Sie fileOrBlob.text() wie folgt:

<input type="file" onchange="this.files[0].text().then(t => console.log(t))">

Wenn der Benutzer eine Textdatei über diesen Eingang hochlädt, wird dies in der Konsole protokolliert. Hier ist eine funktionierende jsbin-Demo .

Hier ist eine ausführlichere Version:

<input type="file" onchange="loadFile(this.files[0])">
<script>
  async function loadFile(file) {
    let text = await file.text();
    console.log(text);
  }
</script>

Derzeit (Januar 2020) funktioniert dies nur in Chrome und Firefox, überprüfen Sie hier die Kompatibilität, wenn Sie dies in Zukunft lesen: https://developer.mozilla.org/en-US/docs/Web/API/Blob/text

Bei älteren Browsern sollte dies funktionieren:

<input type="file" onchange="loadFile(this.files[0])">
<script>
  async function loadFile(file) {
    let text = await (new Response(file)).text();
    console.log(text);
  }
</script>

---

Verwandt: Ab September 2020 wird die neue Natives Dateisystem-API in Chrome und Edge verfügbar, falls Sie permanenten Lese- (und sogar Schreib-) Zugriff auf die vom Benutzer ausgewählte Datei wünschen.