JavaScript/DOM lokale Datei auslesen?

Hay, ist es möglich mittels js auf einer html Seite eine txt auszulesen und in ein Div zu packen? Ich habe es mit Fetch versucht da kommt aber nur das er die Datei nicht findet.

Answer 1

[regex9]

Das ist mit Fetch möglich, sofern du die richtige Adresse zur Datei angibst und zusätzlich Zugriffsrechte bestehen. Sollte die Datei bspw. nur über eine andere Domain erreichbar sein, wird der Aufruf standardmäßig blockiert (Stichwort: CORS).

fetch("http://somedomain.de/file.txt")
  .then(response => response.text())
  .then(data => document.getElementById("id-of-div").textContent = data);

Sofern du bei dir lokal auf dem eigenen Rechner testen möchtest, installiere einen Webserver (IIS / Apache / ...) und rufe dein HTML-Dokument über diesen auf http://localhost/...). Wenn du die Datei über das file://-Protokoll öffnest, wird dein Browser einen Request blockieren.

Comments

[medmonk]

Ich hatte mein Snippet fast so weit, im Grunde identisch zu deinem bloß innerhalb einer function angelegt. Du warst aber etwas schneller. ;)

[Lucnardo]

Okay geht das ganze auch mit ./text.txt oder muss die domain dran stehen?

[regex9]

@Lucnardo

Ein relativer Pfad reicht auch aus.

[Lucnardo]

@regex9

okay geht das ganze auch wenn ich das mit express mache?

[regex9]

@Lucnardo

Mit express.js - ja. Dann hast du ja ebenso einen Server, über den die Webseite ausgespielt wird.

Wenn der Request direkt auf Serverseite ausgeführt werden soll, könntest du Module wie fetch oder Axios (oder halt Node.js-Bordmittel) verwenden.

[Lucnardo]

@regex9

Hm.. also mit fetch get es nicht. Berechtigungen sind aber da das habe ich Kontroliert.  

[Lucnardo]

@Lucnardo

 const fileUrl = './text.txt' // provide file location

    fetch(fileUrl)
      .then(r => r.text())
      .then(t => document.getElementById('text').innerHTML = t)
      .catch(error => alert(error)); 


Mein Code

[regex9]

@Lucnardo

Da du in deiner Fragestellung einen 404 Response andeutest, würde ich zunächst davon ausgehen, dass der Pfad nicht korrekt ist.

Schau zusätzlich in die Entwicklerkonsole (Console / Network). Der Responsecode wäre von Interesse (sofern er von 404 abweicht) und etwaige Fehlermeldungen bezüglich CORS/o.ä..

[Lucnardo]

@regex9

muss er aber. Der Express Server Schickt dir index.html die in einem Ordner liegt an den Client. Die Html file hat aber eine txt im selben ordner mit dem name text.txt ich habe versucht von dem Server auszugehen und ich habe es so wie man es im Snippet sieht von der HTML aus getestet

[Lucnardo]

@Lucnardo

ist aber ein 404

[regex9]

@Lucnardo

Probiere es zuerst mit einer absoluten URL, denn die muss auf jeden Fall korrekt sein. Wenn es mit der klappt, ist deine relative Pfadangabe falsch. Wenn es scheitert, gibt es ein tatsächliches Zugriffsproblem auf deine Datei.

[Lucnardo]

@regex9

kann das eventuell damit zu tun haben das der Express server die verbindung ablehnt?

[regex9]

@Lucnardo

Das solltest du in der Browserkonsole anhand einer Fehlermeldung sehen können.

[Lucnardo]

@regex9

ich hab das Proplem gefunden und gelöst danke. Ich musste nur ne Weiterleitung im Server festlegen