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

Diese Frage mag alt sein, aber es gibt zwei Hauptgedanken, die wir klären müssen. Wollen wir die gesamte Datei auf einmal lesen oder Zeile für Zeile?

Teo, ich möchte die gesamte Datei erhalten und sie später bearbeiten.

Okay, das ist sehr einfach. Wir müssen nur aufrufen Blob.text() Methode (denken Sie daran, dass diese Methode davon ausgeht, dass die Datei als UTF-8 ) und behandeln Sie die Datei wie folgt:

const $output = document.getElementById('output')
const $file = document.getElementById('file')
const fetchFile = async e => {
  const [file] = e.target.files
  const text = await file.text()
  $output.textContent = text
}

$file.onchange = fetchFile

<input id='file' type='file' accept='text/plain'><br>
<pre id='output'>...</pre>

Wie wäre es mit zeilenweise? Ist das möglich?

Ja, mein junger Padawan, auch das ist möglich. Wir müssen nur den String.split() Methode, um den Text in ein Array von Zeilen aufzuteilen:

const $output = document.getElementById('output')
const $file = document.getElementById('file')
let count
const fetchFile = async e => {
  const [file] = e.target.files
  if (!file) return
  count = 0
  const text = await file.text()
  $output.textContent = text

  const lines = text.split(/\r?\n/gm)
  for (const line of lines) {
    if (line) count++
  }
  console.log({count})
}

$file.onchange = fetchFile

<input id='file' type='file' accept='text/plain'><br>
<pre id='output'>...</pre>

Answer 2

Das könnte helfen,

    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET", "sample.txt", true);
    xmlhttp.send();

Answer 3

Lokale AJAX-Aufrufe in Chrome werden aufgrund der same-origin-policy nicht unterstützt.

Die Fehlermeldung in Chrome lautet wie folgt: "Ursprungsübergreifende Anfragen werden für folgende Protokollschemata nicht unterstützt: http, data, chrome, chrome-extension, https."

Das bedeutet, dass Chrome für jede Domain einen virtuellen Datenträger erstellt, um die von der Domain über http/https-Protokolle bereitgestellten Dateien zu speichern. Der Zugriff auf Dateien außerhalb dieses virtuellen Datenträgers wird durch die Richtlinie zur gleichen Herkunft eingeschränkt. AJAX-Anfragen und -Antworten erfolgen über http/https und funktionieren daher nicht für lokale Dateien.

Firefox hat keine solche Einschränkung, daher wird Ihr Code problemlos auf dem Firefox funktionieren. Allerdings gibt es auch für Chrome Umgehungen: siehe hier .

Answer 4

function readTextFile(file) {
    var rawFile = new XMLHttpRequest(); // XMLHttpRequest (often abbreviated as XHR) is a browser object accessible in JavaScript that provides data in XML, JSON, but also HTML format, or even a simple text using HTTP requests.
    rawFile.open("GET", file, false); // open with method GET the file with the link file ,  false (synchronous)
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4) // readyState = 4: request finished and response is ready
        {
            if(rawFile.status === 200) // status 200: "OK"
            {
                var allText = rawFile.responseText; //  Returns the response data as a string
                console.log(allText); // display text on the console
            }
        }
    }
    rawFile.send(null); //Sends the request to the server Used for GET requests with param null
}

readTextFile("text.txt"); //<= Call function ===== don't need "file:///..." just the path 

- Dateitext aus Javascript lesen
- Konsolenprotokolltext aus Datei mit Javascript
- Google chrome und mozilla firefox

In meinem Fall habe ich diese Dateistruktur:

das Ergebnis von console.log :

Answer 5

Wie liest man eine lokale Datei?

Indem Sie dies verwenden, laden Sie eine Datei durch loadText() dann JS wird asynchron warten, bis die Datei gelesen und geladen wird, nachdem, dass es execture readText() Funktion, so dass Sie mit Ihrer normalen JS-Logik (Sie können auch schreiben, ein Try-Catch-Block auf die loadText() Funktion im Falle eines Fehlers entsteht), aber für dieses Beispiel halte ich es auf minimal.

async function loadText(url) {
    text = await fetch(url);
    //awaits for text.text() prop 
    //and then sends it to readText()
    readText(await text.text());
}

function readText(text){
    //here you can continue with your JS normal logic
    console.log(text);
}

loadText('test.txt');