Wie kann ich eine lokale Textdatei zuverlässig in einen Webbrowser einlesen?

Eine lokale Textdatei in den Browser einlesen

Um eine lokale Textdatei in den Browser einzulesen, verwendeten Entwickler traditionell XMLHttpRequest. Eine Möglichkeit, dies zu tun, ist eine Funktion, die den Pfad der Datei übernimmt und jede Textzeile in ein Zeichenarray umwandelt:

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();
}

Dieser Ansatz schlägt jedoch häufig mit Ausnahmen in anderen Browsern als Firefox fehl. Um dieses Problem zu beheben, sollten Entwickler die in JS 2015 eingeführte Fetch-API verwenden:

fetch("myText.txt")
  .then((res) => res.text())
  .then((text) => {
    // do something with "text"
   })
  .catch((e) => console.error(e));

Darüber hinaus ist es aus Sicherheitsgründen wichtig, die Verwendung von file:/// zu vermeiden. Erwägen Sie stattdessen die Verwendung einfacher Webserver wie Pythons http.server oder HTTP-Server zum Laden von Daten.

Ein weiteres Problem tritt auf, wenn versucht wird, Dateien lokal mit XMLHttpRequest zu lesen. Um dieses Problem zu beheben, sollten Entwickler den Status 0 prüfen, da für das Laden lokaler Dateien kein Status zurückgegeben wird:

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;
        console.log(allText);
       }
    }
  }
  rawFile.send(null);
}

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

Das obige ist der detaillierte Inhalt vonWie kann ich eine lokale Textdatei zuverlässig in einen Webbrowser einlesen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!