Mit Javascript eine Textdatei auslesen...

Jacl

Aktives Mitglied
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:
Javascript:
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 :confused:. Kann mir jemand mit einem "Codesnippet" aushelfen :)? Bin für jede Hilfe dankbar...

regards Jacl
 

Jacl

Aktives Mitglied
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
 
Zuletzt bearbeitet:

Jacl

Aktives Mitglied
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 😇
 

Jacl

Aktives Mitglied
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

Super-Moderator
Mitarbeiter
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

Aktives Mitglied
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

Aktives Mitglied
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
 
K

kneitzel

Gast
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

Top Contributor
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

Aktives Mitglied
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
 
K

kneitzel

Gast
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.
 

Jacl

Aktives Mitglied
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

Top Contributor
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....
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
M JavaScript/HTML/CSS Hilfe HTML / CSS 1
S jqmath in javascript einbinden HTML / CSS 3
M Javascript: HTML-Datei erstellen und auf Festplatte speichern HTML / CSS 8
M Javascript: Farbkontrast überprüfen auf einer Webseite HTML / CSS 14
M Javascript: CSS Parsen um herauszufinden ob relativer Schriftgrößen verwendet werden HTML / CSS 23
M HTML-Code einer fremden Webseite auslesen - geht das mit Javascript HTML / CSS 19
S Sicherheitsaspekt JavaScript HTML / CSS 3
M Webservice per Javascript ansprechen HTML / CSS 5
G php in javascript einbinden HTML / CSS 13
E Javascript/ Eventlistener ohne click? HTML / CSS 2
A Nur bestimmte Zeichen in HTML input Feld erlauben (JavaScript) HTML / CSS 11
J JavaScript Woerter erkenen HTML / CSS 4
C Eclipse und Javascript full autocomplete? HTML / CSS 1
A DragDrop mehrerer Shapes im SVG per Javascript? HTML / CSS 0
M Javascript Tastatureingabe HTML / CSS 2
B javascript ausgabe in Text HTML / CSS 2
E Javascript Status Abfrage HTML / CSS 7
J Javascript im DOM einer Webseite ändern HTML / CSS 1
H javascript - html Beispiel LQH, verwirklichung HTML / CSS 1
P JavaScript var an bean Setter übergeben HTML / CSS 2
Z Erste Website CSS3 HTML5 Javascript Jquery - Kritik HTML / CSS 3
P RSS FEED/ JSON/ Filter By Date/ Handlebars / Javascript HTML / CSS 0
B Externes Suchfeld - Javascript. REST? HTML / CSS 0
S JavaScript und Ajax Erfahrene Gesucht!!!! HTML / CSS 0
V Javascript Adobe Acrobat XI Pro Formular Dropdown-Liste -> vorbelegte Checkboxen HTML / CSS 1
0 Javascript Leaflet Marker Popup mit Adresse HTML / CSS 1
F Variable einer jsp auf eine tag.java Klasse übergeben HTML / CSS 3
N Eine Website responsive machen HTML / CSS 6
D Daten von einer HTML Datei auf eine andere HTML Datei bekommen HTML / CSS 2
Dimax Mehrere css Dateien in eine HTML Seite einbinden HTML / CSS 3
A Mit Modal (Bootstrap) eine html Seite anzeigen, die von id abhängig ist HTML / CSS 0
J JSF eine Datei uploaden in einer ConfirmDialog von PrimeFaces HTML / CSS 0

Ähnliche Java Themen

Neue Themen


Oben