Wie kann ich lokale Textdateien in einem Webbrowser effizient lesen?

Lokale Textdateien im Browser lesen

XMLHttpRequest ist eine häufig verwendete Methode zum asynchronen Datenabruf im Browser, kann aber manchmal auftreten Probleme beim Versuch, lokale Textdateien zu lesen.

Probleme mit XMLHttpRequest

Ein häufiger Fehler ist die XMLHttpRequest-Ausnahme 101, die anzeigt, dass die Anfrage abgebrochen wurde. Dies kann auftreten, wenn versucht wird, lokale Dateien zu lesen, ohne das Protokoll „file://“ anzugeben.

Alternative: Fetch API

Eine einfachere Möglichkeit, lokalen Text zu lesen Dateien erfolgt über die Fetch-API, die 2015 eingeführt wurde. Beispielcode, der die Fetch-API verwendet, um eine lokale Datei mit dem Namen zu lesen „myText.txt“:

fetch("myText.txt")
  .then((res) => res.text())
  .then((text) => {
    // Process the text data
  })
  .catch((e) => console.error(e));

Zugriff auf lokale Dateien

Moderne Browser erlegen strenge Einschränkungen für den direkten Zugriff auf das Dateisystem auf. Vermeiden Sie die Verwendung von „file:///“. Erwägen Sie stattdessen die Verwendung einfacher Webserver wie Python -m http.server oder npx http-server, um Daten über reguläre HTTP-URLs zu laden.

Beispielcode mit XMLHttpRequest

Bei Verwendung XMLHttpRequest: Überprüfen Sie manuell den Status 0 (was auf lokale Dateien hinweist), anstatt sich auf einen zurückgegebenen Status zu verlassen Code:

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

Dateipfad angeben

Denken Sie daran, das Protokoll „file://“ einzubeziehen, wenn Sie den Dateipfad angeben:

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

Das obige ist der detaillierte Inhalt vonWie kann ich lokale Textdateien in einem Webbrowser effizient lesen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!