Mit Javascript eine Textdatei auslesen...

[Jacl]

Hallo Profis.
Ich versuche mich gerade in HTML in Kombination mit JavaScript. Ich habe ein Eingabefeld (input) und einen Button auf meiner HTML-Seite. Weiters habe ich ein Verzeichnis mit Textdateien lokal gespeichert. Je nach Eingabe im Eingabefeld (mit Autovervollständigung) können Einträge gemacht werden. Danach soll nach einem Klick auf den Button die entsprechende Textdatei angezeigt werden. Die Eingaben entsprechen den Namen der gespeicherten Textdateien (deswegen die Autovervollständigung!).
Ich bekomme es nicht zum laufen - hier mein JavaScriptcode:

var button = document.querySelector('button');
button.addEventListener('click', handlerForButton);

function handlerForButton ( )
{
   var eingabe = document.querySelector("#eingabe").value; //Eingabe vom Eingabefeld speichern
   var pfad = "Vorgaben/" + eingabe + ".txt"; // Den Pfad zur Textdatei speichern
   var datei = document.getElementById("pfad").files[0];
   var reader=new FileReader();
   reader.readAsText(datei);
   var text=reader.result;
   alert (text);
}

Mit dem obigen Code funktionierts nicht. Ich stehe an, bin Anfänger . Kann mir jemand mit einem "Codesnippet" aushelfen ? Bin für jede Hilfe dankbar...

regards Jacl

 

[M.L.]

Auch hallo,

mit originalem JavaScript dürfte zumindest der schreibende Teil auf ein Problem stossen und setzt z.B. eine serverseitige Komponente wie Node.js voraus: https://www.tutorialspoint.com/how-to-read-and-write-a-file-using-javascript Und für das Lesen kann man auch die HTML5-API verwenden: https://www.geeksforgeeks.org/how-to-read-a-local-text-file-using-javascript/

 

[Jacl]

Schreiben will ich nix, ich will nur eine bereits vorhandene Textdatei auslesen und in einer "alertbox" wiedergeben. Welche Textdatei im Verzeichnis: Vorgaben/Textdatei.txt gelesen werden soll, gibt man über ein Eingabefeld (input) ein. Bei diesem Beispiel https://www.geeksforgeeks.org/how-to-read-a-local-text-file-using-javascript/ öffnet sich der Dialog Datei öffnen, dass will ich nicht!
Es soll über ein Eingabefeld die zu öffnende Textdatei eingegeben werden und der Inhalt der Textdatei in einer "alertbox" angezeigt werden...
Das ist möglich, nur krieg ich's nicht hin ☹️

regards Jacl

 

[mihe7]

Es soll über ein Eingabefeld die zu öffnende Textdatei eingegeben werden und der Inhalt der Textdatei in einer "alertbox" angezeigt werden...
Das ist möglich, nur krieg ich's nicht hin ☹️

Wenn das möglich wäre, dann hätte nicht nur ich damit ein Problem.

 

[Jacl]

Wenn das möglich wäre, dann hätte nicht nur ich damit ein Problem.

Wieso?
Ich habe gesehen, dass Textdateien über iframe angezeigt werden können. Wo ist der Unterschied zu meinem oben beschriebenen Vorhaben? Ich will ja nur den Inhalt einer bereits vorhandene Textdatei anzeigen. Im Eingabefeld wird nur ausgewählt welche bereits bestehende Textdatei angezeigt wird.
Die Idee dahinter. Was mache ich wenn die blaue Lampe leuchtet? Im Eingabefeld wähle ich per Autovervollständigen den Eintrag "blaue Lampe" aus. Wenn ich danach den Button klicke wird mir der Inhalt der Textdatei BlaueLampe.txt angezeigt...

regards Jacl 😇

 

[mrBrown]

Wieso?

Weil dann jede Website alle Dateien auf deinem Rechner auslesen könnte.

 

[httpdigest]

Mit FileReader kannst du nur Dateien auslesen, die auch von dem User per file input Element ausgewählt wurden. Du kannst nicht eine beliebige benamte Datei im Dateisystem lesen. Nur per Callback an einem file input Element, bei dem der User vorher eine Datei lokal ausgewählt hat.
Siehe: https://www.javascripture.com/FileReader

 

[Jacl]

Weil dann jede Website alle Dateien auf deinem Rechner auslesen könnte.

Es sind nur Textdateien die ich vorher erstellt habe. Andere beliebige Dateien werden ja nicht geöffnet (würde ich mit einer Fehlerdialogbox anzeigen!) Im Beispiel Dialog öffnen kann ich ja auch beliebige Dateien öffnen, ich kann sogar in beliebige Verzeichnisse wechseln. Vielleicht habe ich's schlecht erklärt - ich kann's aber nicht besser erklären... 😕

regards Jacl

 

[mrBrown]

Es sind nur Textdateien die ich vorher erstellt habe. Andere beliebige Dateien werden ja nicht geöffnet (würde ich mit einer Fehlerdialogbox anzeigen!) Im Beispiel Dialog öffnen kann ich ja auch beliebige Dateien öffnen, ich kann sogar in beliebige Verzeichnisse wechseln. Vielleicht habe ich's schlecht erklärt - ich kann's aber nicht besser erklären... 😕

Du machst das vielleicht nicht — aber was hindert irgendeinen „bösen“ daran, einfach alle Dateien in deinem Home-Verzeichnis auszulesen, wenn der Browser das zulassen würde?
Damit genau das nicht möglich ist, verhindern Browser das, und lassen nur das Lesen von Dateien zu, die der Nutzer ausgewählt hat.

 

[Jacl]

Mit FileReader kannst du nur Dateien auslesen, die auch von dem User per file input Element ausgewählt wurden. Du kannst nicht eine beliebige benamte Datei im Dateisystem lesen. Nur per Callback an einem file input Element, bei dem der User vorher eine Datei lokal ausgewählt hat.
Siehe: https://www.javascripture.com/FileReader

Ja genau das will ich. Aber ich will keinen Datei öffnen Dialog um die Textdatei auszuwählen. Ich habe sagen wir 10 Textdateien.txt mit Anweisungen wenn ein bestimmter Fall eintritt. Tritt der Fall "blaue Lampe leuchtet" ein, so wähle ich per Autovervollständigen aus dem Eingabefeld (input) den Eintrag "blaueLampe" aus. Wenn anschließen der Button geklickt wird, wird die Textdatei blaueLampe.txt ausgelesen und angezeigt. Es können nur die Textdateien gelesen werden die ich per per Autovervollständigen anbiete. Jede andere Eingabe die nicht der Autovervollständigung entspricht führt zu einer Fehlermeldung (würde ich per Alertdialog anzeigen!)...

regards Jacl

 

[Jacl]

verhindern Browser das, und lassen nur das Lesen von Dateien zu, die der Nutzer ausgewählt hat

Der Nutzer wählt die Dateien aus - per vordefinierter Autovervollständigung im Eingabefeld (würde ich mit einer datalist --> option vorgeben!)... 😊
Andere Eingaben werden nicht angezeigt...

regards Jacl

 

[mrBrown]

Der Nutzer wählt die Dateien aus - per vordefinierter Autovervollständigung im Eingabefeld (würde ich mit einer datalist --> option vorgeben!)... 😊
Andere Eingaben werden nicht angezeigt...

Der Nutzer muss das per Browser-Dialog auswählen, alles andere lässt der Browser nicht zu.

 

[sascha-sphw]

Der Nutzer muss das per Browser-Dialog auswählen, alles andere lässt der Browser nicht zu.

Um noch genauer zu werden. Nur mit:

<input type="file"/>

Wie @httpdigest geschrieben hat. https://www.java-forum.org/thema/mit-javascript-eine-textdatei-auslesen.189587/post-1233638

 

[mrBrown]

Um noch genauer zu werden. Nur mit:

<input type="file"/>

Mit File System Access API auch anders

 

[Jacl]

File System Access API

Werde mir das mal durchlesen...

Vielen Dank jedenfalls... 🙂

regards Jacl

 

[mrBrown]

Werde mir das mal durchlesen...

Vielen Dank jedenfalls... 🙂

Auch damit ist immer ein Dialog nötig und der Nutzer bestimmt über den Dateizugriff.

 

[Jacl]

Auch damit ist immer ein Dialog nötig und der Nutzer bestimmt über den Dateizugriff.

Schauen wir mal... 😉

regards Jacl

 

[mihe7]

Sag Bescheid, wenn Du einen Weg gefunden hast

 

[Jacl]

So wie ich es wollte (mit Textdateien) funktionierts nicht. Daher habe ich anstatt Textdateien Html-Dateien mit Textinhalt erstellt. Diese öffne ich jetzt mit window.open();. So kann ich je nach Eingabe die dazugehörige Html-Datei öffnen... 😁

regards Jacl

 

[kneitzel]

HTML + JavaScript sagt ja erst einmal nichts über die Rahmenbedingungen aus.

Wenn es in einem normalen Browser läuft, dann hat man natürlich sehr eingeschränkte Rechte - aus Sicherheitsgründen geht dies nicht anders.

Aber es gibt ja auch andere Alternativen. Statt mit einem normalen Browser läuft das dann in einem eigenständigen Rahmen. Die Dateien werden in der Regel auch nicht mehrbeliebig aus dem Netz geladen. Beispiele für solche "Rahmen" wären z.B. Electron (Desktops, wird z.B. von Visual Studio Code genutzt) und Apache Cordova (Mobile Applikationen).

Aber der ganze Anwendungsfall ist mir erst einmal unbekannt. Nehmen wir den ersten Fall: Es handelt sich um einer Webseite, die auch einem Server liegt: Das lesen von so Dateien lokal macht da keinen Sinn (Schreiben ist nicht gefordert: Wie kommen die Dateien da also hin?) Somit wären das zusätzliche Daten, die auch noch auf dem Server liegen. Und das ist prinzipiell ja kein Problem, denn dann ließen sich die Dateien über einen Web Request laden. (Also sowas wie $.get('./myfile.txt').then(...).fail(....) - aber da gibt es zig Möglichkeiten und kaum ein JS Framework wird einen da im Stich lassen, denn unter dem Strich ist das auch nur ein asynchrones Laden ...)

Node ist ansonsten ja auch schon genannt worden. Das wäre dann das Szenario einer Lokalen App bzw. man bietet dem Browser einen lokalen Server, der dann alles bereit stellt (womit man dann beim ersten Anwendungsfall sind mit Browser als Client und einem Server...

Ansonsten kann man sich auch generell PWAs ansehen. Und da hätte man dann so Dinge wie Cache Storage API und IndexedDB, die man nutzen könnte. Siehe dazu z.B.: https://web.dev/storage-for-the-web/ - da werden auch diverse andere Dinge genannt und es werden weiterführende Links gegeben.

Das ganze Thema ist aber nichts, in dem ich mich spezialisiert hätte oder so. Ich kenne das alles nur von kleinen "Spielereien". Daher sind andere Experten evtl. besser geeignet, Dir weiter zu helfen wenn es um konkrete Probleme geht. Mir geht es in erster Linie weniger um technische Aspekte des Problems sondern ich wollte nur einmal schauen, was das eigentliche Szenario ist.
Und was in meinen Augen auch wichtig ist: Evtl. nicht in irgendwelchen technischen Dingen verlieren, die ggf. für die Praxis wenig relevant sind sondern das eigene Lernen etwas mehr auszurichten - z.B. auf das Thema PWA (so dies passend scheint)....

 

[Thallius]

Ich denke mal unser Kollege hier hat noch ein grundsätzliches Verständnis Problem was eine Server-Client Anwendung ist. Da er JavaScript laufen läßt hat er bestimmt einen wamp o.ä. installiert und meint nun die Darien im www/html Ordner wären lokaler dateien nur weil sie auf seiner Festplatte liegen. Naja ok irgendwie sind sie es ja auch aber eben nicht für den Browser.

 

[Jacl]

Ich denke mal unser Kollege hier hat noch ein grundsätzliches Verständnis Problem was eine Server-Client Anwendung ist.

Nö, dass passt aber jetzt mit den Html-Dateien. So funktioniert meine Idee. Ich wollte einfach eine Grundsätzliche Idee umsetzen und eventuell dann als private Homepage hochladen. Schau ma mal wie sich es mit meiner Zeit ausgeht. Wenn ich fertig bin/werde stelle ich den Link hier rein. Mein kostenloser Webspace ist von Magenta (und da läuft soweit ich informiert bin kein php und dergleichen - daher Javascript!). Im übrigen gebe ich alles von Hand (verwende unter Linux den gedit-Editor sonst nix!) ein und verwende keine Zusatzsoftware.

regards Jacl

 

[mrBrown]

Nö, dass passt aber jetzt mit den Html-Dateien.

Auch wenn es funktioniert, klingt es doch sehr nach einem Verständnisproblem...

 

[kneitzel]

So wie ich es wollte (mit Textdateien) funktionierts nicht. Daher habe ich anstatt Textdateien Html-Dateien mit Textinhalt erstellt. Diese öffne ich jetzt mit window.open();. So kann ich je nach Eingabe die dazugehörige Html-Datei öffnen... 😁

regards Jacl

Das was du da schlicht gemacht hast im Code wäre vergleichbar mit dem einfachen anblicken einend Links mit Target=_new (so ich mich jetzt nicht vertan habe - aber dann wird mich schon jemand verbessern).

Das ist also bezüglich der eigentlichen Fragestellung (Textdatei auslesen) nicht wirklich passend. Und du liest da keine Datei, sondern du öffnest ein neues Fenster und gibst sozusagen eine relative URL an.

 

[Thallius]

und wenn er es auf den Server lädt wird er sich wundern das es nicht mehr funktioniert

 

[Jacl]

Das was du da schlicht gemacht hast im Code wäre vergleichbar mit dem einfachen anblicken einend Links mit Target=_new (so ich mich jetzt nicht vertan habe - aber dann wird mich schon jemand verbessern).

Ich dachte da gibt's ne einfache Lösung und nen "snippet" hiezu - ich hoffe du kannst mir verzeihen 😊. Wie schon geschrieben, ich konnte meine Idee vorerst mal weiter umsetzen (siehe meine Antwort weiter oben)...

Das ist also bezüglich der eigentlichen Fragestellung (Textdatei auslesen) nicht wirklich passend. Und du liest da keine Datei, sondern du öffnest ein neues Fenster und gibst sozusagen eine relative URL an.

Ja, so mache ich es jetzt...

regards Jacl

 

[Thallius]

Ich dachte da gibt's ne einfache Lösung und nen "snippet" hiezu - ich hoffe du kannst mir verzeihen 😊. Wie schon geschrieben, ich konnte meine Idee vorerst mal weiter umsetzen (siehe meine Antwort weiter oben)...


Ja, so mache ich es jetzt...

regards Jacl

Dazu müssen deine Textdateien später aber auch auf dem Server liegen. Also nix mehr mit lokal. Damit ist deine ganze Aufgabenstellung vom Anfang eigentlich für die Katz....

 

[Jacl]

und wenn er es auf den Server lädt wird er sich wundern das es nicht mehr funktioniert

So weit bin ich noch nicht - aber das könnte durchaus passieren (wird heuristische Methode zur Problemlösung genannt - trail & error)... 🙃

Es ist noch kein Meister vom Himmel...

regards Jacl

 

[Jacl]

Dazu müssen deine Textdateien später aber auch auf dem Server liegen. Also nix mehr mit lokal. Damit ist deine ganze Aufgabenstellung vom Anfang eigentlich für die Katz....

Ja, die hätte ich natürlich auf dem Server gespeichert (da habe ich mich zu unpräzise/falsch ausgedrückt)...

regards Jacl