Mit Javascript eine Textdatei auslesen...

J

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
 
J

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:
mihe7

mihe7

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

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 😇
 
J

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

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

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
 
J

Jacl

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

mrBrown

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

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
 
J

JustNobody

Top Contributor
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)....
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
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

Anzeige

Neue Themen


Oben