Inputfelder bearbeitet von Rolf b 15.07.2016 10:28 Hallo Markus, du müsstest Dir erstmal klar werden, welche Architektur du anstrebst. Du kannst - rein theoretisch - eine HTML Seite bauen, die Du von C: startest und dann die komplette Steuerung selbst durchführt (sprich: per JavaScript und Zugriff aufs lokale Dateisystem). In dem Fall bist Du auf den IE beschränkt, wo Du bei einer entsprechend hohen Vertrauensstellung deiner Seite das Recht hast, mit dem ActiveX Objekt FileSystemObject zu arbeiten, bzw. man kann wohl Chrome auch mit einer Option starten die den Zugriff auf lokale Dateien erlaubt. Ohne FileSystemObject kannst Du zumindest eine lokale Seite schreiben, die nach Eingaben in das Namensfeld per JavaScript ein <img> Tag in das DIV einsetzt mit einem entsprechenden src Attribut. Eine Auswahlliste oder eine sinnvolle Fehlermeldung "Datei existiert nicht" gibt's dann nicht. Die Alternative ist der Einsatz eines lokal laufenden Webservers, wovon es eine Menge gibt. Allerdings hast Du dann eine beachtliche Lernkurve vor Dir. Ich bin nicht sicher, ob Hilfe beim Aufsetzen eines lokalen Webservers zur Kernkompetenz dieses Forum gehört, das Thema ist nicht per Fingerschnips abgehakt. Ein billiges Beispiel ohne Schnickschnack, das für die Bilddateien funktioniert die im gleichen Verzeichnis stehen wie das HTML selbst, wäre das folgende. Das ist kein Muster-HTML, es soll nur auf ein paar Ideen hinweisen. ~~~html <html> <head> </head> <body> <div> <input type="file" id="hugo" size="50em"/> </div> <div> <img id="bild" src="no-picture-at-all.png"/> </div> <script type="text/javascript"> window.onload = function() { var hugo = document.getElementById("hugo"); hugo.addEventListener("change", inputChanged); function inputChanged(evt) { var img = document.getElementById("bild"); var bs = evt.target.value.match(/.*\\(.*)/); if (bs.length > 1) img.src = bs[1]; } } </script> <body> </html> ~~~ Das HTML hat ein File-Upload Control und ein Image Tag. Es gibt kein Form, nur einen event-Handler, der auf changed Events des Fileupload Control reagiert. Dieser changed Handler liest den aktuell ausgewählten Dateinamen, entfernt die Pfadangabe per regulärem Ausdruck, und setzt das Ergebnis als src des Image Tag. Den Pfad muss ich entfernen weil der Browser Dir keinen sinnvollen Pfad liefert - bewusst nicht, weil sonst eine Webseite den lokalen PC ausspionieren könnte. Ohne einen Webserver oder das FileSystemObject des IE wird mehr nicht möglich sein. Gruß Rolf
Inputfelder bearbeitet von Rolf b 15.07.2016 10:29 Hallo Markus, du müsstest Dir erstmal klar werden, welche Architektur du anstrebst. Du kannst - rein theoretisch - eine HTML Seite bauen, die Du von C: startest und dann die komplette Steuerung selbst durchführt (sprich: per JavaScript und Zugriff aufs lokale Dateisystem). In dem Fall bist Du auf den IE beschränkt, wo Du bei einer entsprechend hohen Vertrauensstellung deiner Seite das Recht hast, mit dem ActiveX Objekt FileSystemObject zu arbeiten, bzw. man kann wohl Chrome auch mit einer Option starten die den Zugriff auf lokale Dateien erlaubt. Ohne FileSystemObject kannst Du zumindest eine lokale Seite schreiben, die nach Eingaben in das Namensfeld per JavaScript ein <img> Tag in das DIV einsetzt mit einem entsprechenden src Attribut. Eine Auswahlliste oder eine sinnvolle Fehlermeldung "Datei existiert nicht" gibt's dann nicht. Die Alternative ist der Einsatz eines lokal laufenden Webservers, wovon es eine Menge gibt. Allerdings hast Du dann eine beachtliche Lernkurve vor Dir. Ich bin nicht sicher, ob Hilfe beim Aufsetzen eines lokalen Webservers zur Kernkompetenz dieses Forum gehört, das Thema ist nicht per Fingerschnips abgehakt. Ein billiges Beispiel ohne Schnickschnack, das für die Bilddateien funktioniert die im gleichen Verzeichnis stehen wie das HTML selbst, wäre das folgende. Das ist kein Muster-HTML, es soll nur auf ein paar Ideen hinweisen. ~~~html <html> <head> </head> <body> <div> <input type="file" id="hugo" size="50em" </div> <div> <img id="bild" src="no-picture-at-all.png"/> </div> <script type="text/javascript"> window.onload = function() { var hugo = document.getElementById("hugo"); hugo.addEventListener("change", inputChanged); function inputChanged(evt) { var img = document.getElementById("bild"); var bs = evt.target.value.match(/.*\\(.*)/); if (bs.length > 1) img.src = bs[1]; } } </script> <body> </html> ~~~ Das HTML hat ein File-Upload Control und ein Image Tag. Es gibt kein Form, nur einen event-Handler, der auf changed Events des Fileupload Control reagiert. Dieser changed Handler liest den aktuell ausgewählten Dateinamen, entfernt die Pfadangabe per regulärem Ausdruck, und setzt das Ergebnis als src des Image Tag. Den Pfad muss ich entfernen weil der Browser Dir keinen sinnvollen Pfad liefert - bewusst nicht, weil sonst eine Webseite den lokalen PC ausspionieren könnte. Ohne einen Webserver oder das FileSystemObject des IE wird mehr nicht möglich sein. Gruß Rolf
nicht angemeldet nicht angemeldet
