Andy Nail: Bilddatei aus der lokalen Festplate anzeigen

Hallo zusammen

ich würde nun gerne ermöglichen den Link zu einer Bilddatei anzugeben, die dann auch angezeigt werden soll. Gebe ich in den Browser file:///c:\Pfad\Datei.bmp ein, dann wird dieser hierin geöffnet. Doch gebe ich es als src an, bin ich bisher stets erfolglos.

Also welche Möglichkeiten hätte ich?

Danke Gruß Andreas

  1. Hallo

    Bei mir funktioniert es wenn ich Slashes statt Backslashes verwende und mit dem Laufwerkbuchstaben beginne, also (bei mir unter Windows 7) schlicht

    c:/Pfad/Datei.bmp
    

    Ich habe nicht ausprobiert, ob Groß-/Kleinschreibung beachtet werden müssen oder Sonderzeichen / Umlaute Probleme bereiten.

    Gruss

    MrMurphy

    1. Jo Du Hallo

      jedoch ist es egal wie ich es schreibe. Ich dachte ich schreibe es mit dem backslash, da mein Browser das Bild so anzeigt. Und ob ich mit file oder mit c: beginne, und das in Groß oder Kleinschreibung, ändert nichts an einem leeren Platzhalter. Mehr will so einfach nicht rauskommen!

      Aber auf jeden Fall vielen Dank für die Infos, worbei ich weiterhin offen für weitere bin!

      Also schonmal Danke Gruß Andreas

      1. Hej Andy,

        jedoch ist es egal wie ich es schreibe. Ich dachte ich schreibe es mit dem backslash, da mein Browser das Bild so anzeigt. Und ob ich mit file oder mit c: beginne, und das in Groß oder Kleinschreibung, ändert nichts an einem leeren Platzhalter. Mehr will so einfach nicht rauskommen!

        Komisch - bei mir funktioniert es auch - und da WEindows nciht case sensitiv ist, ist die Groß-Klein-Schreibung nicht von Bedeutung…

        Marc

  2. Moin,

    wo liegt denn die HTML-Datei, in der das Bild referenziert wird? Vielleicht kommst du mit einem relativen Pfad ans Ziel. Oder rufst du die HTML-Datei über HTTP auf?

    Viele Grüße
    Robert

    1. Hallo

      die Datei also in ihrem angegebenen Verzeichnis und die Seite liegt wie gewohnt auf ihrem Webserver. Die Info, dass die Seite das nicht halten kann, wird schon erscheinen, doch vor dem hochladen will ich die Möglichkeit einer Voransicht geben. Und das auch ohne einen temporären Ordner. Es soll einfach mil darauf verknüpft werden!

      Danke Gruß Andreas

      1. Tach!

        die Datei also in ihrem angegebenen Verzeichnis und die Seite liegt wie gewohnt auf ihrem Webserver. Die Info, dass die Seite das nicht halten kann, wird schon erscheinen, doch vor dem hochladen will ich die Möglichkeit einer Voransicht geben. Und das auch ohne einen temporären Ordner. Es soll einfach mil darauf verknüpft werden!

        Du möchtest von einer im Web liegenden Seite auf eine lokale Datei verweisen? Das wird aus Sicherheitsgründen wohl der Browser nicht zulassen. Eine entsprechende Fehlermeldung wird vermutlich in der Konsole der im Browser eingebauten Entwicklertools auftauchen.

        Aber Javascript und die File API können helfen.

        dedlfix.

      2. Moin Andy,

        wenn du deine HTML-Seite off- und online testen möchtest, nimm doch relative Pfade.

        Viele Grüße
        Robert

  3. Hallo Andreas,

    meiner Erfahrung nach grenzt das Aufrufen lokaler Resourcen über den vollständigen Pfad an ein Glücksspiel. Je nach System und Browser muss da ein „/“ oder ein „\“ genommen werden. Evtl. muss der auch noch mit einem weiteren „\“ maskiert werden.

    Was hast du denn vor? Warum reicht nicht der relative Pfad? Wo liegt denn die HTML-Datei?

    Gruß
    Jürgen

    1. Jo Hallo, Ich hoffe noch auf Erfolg

      Also ich hab mich jetzt entschieden die Datei nur über das file input auswählen zu können. Was ja wunderbar funktioniert. Aber wie bekomme ich es hin den Dateinamen darstellen zu können ohne gleich eine zweite Spalte für das Ganze Thema Bild anlegen zu müssen?

      Danke Gruß Andreas

      1. Hallo,

        du kannst die DataUrl direkt dem src des Bildes zuweisen. Hast du den von dedlfix verlinkten Artikel schon gelesen?

        Gruß
        Jürgen

        1. Ja Hallo,

          ich wusste nicht, ob ich hier praktisch mit einem weiteren Thema anfangen könnte, und dabei noch Hilfe bekomme. Aber schonmal Danke!

          Es ist ja so, dass ich jetzt das Ergebnisals die src verwende und in einer Spaltein der Datenbank speichere. Doch wie stelle ich es dar? Ich würde gerne den Dateinamen zeigen, dass es irgendwie eine Verbindung zu der ausgewählten Datei gibt. Doch würde ich auch gerne die Eigenschaften eines Links zeigen, was ja bisher auch einwandfrei funktioniert. Aber dann jetzt damit auch den Namen der Datei anzeigen soll, da ja nur im Hintergrund das Ergebnis aus dem readasDataURL stehen bleibt.

          Also Danke und freue mich auf jederlei Hile!

          Mit Gruß Andreas

          1. Tach!

            ich wusste nicht, ob ich hier praktisch mit einem weiteren Thema anfangen könnte, und dabei noch Hilfe bekomme. Aber schonmal Danke!

            Du kannst Hilfe bekommen, wenn sich jemand mit dem Thema auskennt. Das ist nur nicht immer der Fall. Manchmal steht aber auch der menschliche Faktor im Weg, dass jemand was sachdienliches zu antworten mag.

            Ich würde gerne den Dateinamen zeigen, dass es irgendwie eine Verbindung zu der ausgewählten Datei gibt.

            Du kennst ja schon readAsDataURL. Das ist eine Methode des Objekts FileReader der File API. Eine umfangreiche Dokumentation solcher Javascript-Geschichten ist das MDN (Mozilla Developer Network). Dort in der Nähe zum FileReader ist dann auch der Rest der File API beschrieben. Die Aufgabe des FileReaders ist, Dateien zu lesen, aber nicht auch noch Informationen über Dateien bereitzustellen. Dafür gibt es das File-Objekt. Das hat auch eine Eigenschaft namens name. Und du bekommst ein solches Objekt aus einem <input type=file>.

            In dem Beispiel auf der Seite zu FileReader.readAsDataURL() ist nicht so deutlich zu sehen, dass du da ein file-Objekt in der Variable file stehen hast. Aber man sieht im Abschnitt Syntax, dass readAsDataURL einen Parameter namens blob haben möchte, und dass das ein Blob oder File sein kann. Von da aus kann man sich dann auch zur Beschreibung von File durchhangeln und in der Eigenschaftenliste die Eigenschaft name finden.

            dedlfix.

            1. OK Du Hallo und Vielen Dank,

              doch was soll ich bitte als Untergrund des Ganzen nehmen? Denn ein readasDataURL braucht ja ein Array und was das file-Objekt dann wohl so ausgeben wird. Und OK, da kann ich nach mit dem Zusatz name bei files[0] den Namen ermitteln: Und wenn ich das auch mit dem FileReader könne, dann müsste ich ja wissen was ich dann da als Grundlage für Alles nehmen soll?

              Danke Gruß Andreas

              1. Tach!

                doch was soll ich bitte als Untergrund des Ganzen nehmen? Denn ein readasDataURL braucht ja ein Array und was das file-Objekt dann wohl so ausgeben wird.

                Nö, ein File-Objekt. Warum sollte es in Array haben wollen? Das ergibt keinen Sinn, einen Reader nur mit mehreren Objekten füttern zu können.

                Und OK, da kann ich nach mit dem Zusatz name bei files[0] den Namen ermitteln:

                Wenn da was ein Array liefert, dann ist es das input-Element, denn damit kann man ja mehrere Dateien wählen. files[0] ergibt dann den ersten Eintrag der möglicherweise mehreren Dateien. Das ist ein File-Objekt. Ebenso alle anderen Einträge deses Arrays.

                Und wenn ich das auch mit dem FileReader könne, dann müsste ich ja wissen was ich dann da als Grundlage für Alles nehmen soll?

                Das File-Objekt, das da aus dem input kommt, hat eine Eigenschaft name. Du kannst auf dieses File-Objekt und dessen Eigenschaften zugreifen, bevor und auch nachdem du es an den FileReader gibst. Das steht dir unabhängig davon zur Verfügung.

                dedlfix.

                1. OK Danke,

                  doch vielleicht verstehe ich irgend was nicht. Denn ich sehe überall kein Ergebnis! Und soll es also dann nur so sein dass ich den Dateinamen in eine separate/zweite Spalte setze, um sie darstellen zu können?

                  Schade, aber trotzdem Vielen Dank und gerne auch weiter Auskünfte/Hilfe.

                  Danke Gruß Andreas

                  1. Hallo Andy Nail,

                    Und soll es also dann nur so sein dass ich den Dateinamen in eine separate/zweite Spalte setze, um sie darstellen zu können?

                    Kannst du bitte noch einmal darstellen, was du eigentlich möchtest? Am besten ohne dabei an deine Lösungsversuche zu denken.

                    Bis demnächst
                    Matthias

                    --
                    Rosen sind rot.
                    1. Jo Hallo, und dann nochmal:

                      ich habe vor, dem Benutzer die Möglichkeit zu geben eine Datei aus der Festplatte auswählen zu können. Das funktioniert ja auch ganz toll mit dem File Input Objekt und mit der Funktion readasDataURL. Und um dem Benutzer zeigen zu können, welche Datei er ausgewählt hat, zeige ich Ihm den Dateinamen an.

                      Man soll aber das Formularfeld wieder aufrufen können, um beispielsweise sehen zu können um welches Bild es sich dabei handelt. Und das ist ja die ganze Zeit meine Frage, wie ich das denn beim Aufruf des Formulars erreichen kann?

                      Ich bedanke mich schonmal, würde es aber schade finden, wenn es denn keine Lösung dieses Problems geben könnte. Aber trotzdem schonmal mein Dankeschön!

                      Gruß Andreas

                      1. Hallo Andy Nail,

                        Man soll aber das Formularfeld wieder aufrufen können, um beispielsweise sehen zu können um welches Bild es sich dabei handelt. Und das ist ja die ganze Zeit meine Frage, wie ich das denn beim Aufruf des Formulars erreichen kann?

                        Das heißt der Benutzer lädt eine Datei auf euren Server hoch und wenn er irgendwann später wieder aufschlägt, möchtest ihr ihm zeigen, wie die Datei hieß, die er damals auf euren Server geladen hatte?

                        Bis demnächst
                        Matthias

                        --
                        Rosen sind rot.
                        1. Hallo

                          Das heißt der Benutzer lädt eine Datei auf euren Server hoch und wenn er irgendwann später wieder aufschlägt, möchtest ihr ihm zeigen, wie die Datei hieß, die er damals auf euren Server geladen hatte?

                          Das scheint die Aufgabe zu sein. Ich frage mich allerdings, was einem, gerade nach längerer Zeit, diese Information bringt. Eventuell geht es auch noch um Dateinamen von Dateien, die andere Benutzer des Systems hochgeladen haben. Bestenfalls ist die Info dann irrelevant, schlimmstenfalls enthüllt sie über den betreffenden Benutzer mehr, als diesem lieb sein kann.

                          Tschö, Auge

                          --
                          Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
                          Toller Dampf voraus von Terry Pratchett
                          1. Jo Hallo Auge,

                            der Benutzer erfährt nur Informationen über die von Ihm erstelltesn Objekte. Und ich wollte eine Voransicht des Bildes geben, bevor dieses hochgeladen wird. Und dann hat man es vollbracht und hat das Bild hochgeladen. Und die Information um welche Datei es sich dabei handelt soll Ihm stets vorliegen können. Es handelt sich ja auf jeden Fall nur um seine Datei!

                            Danke Gruß Andreas

                            1. Hallo Andy,

                              Und ich wollte eine Voransicht des Bildes geben, bevor dieses hochgeladen wird.

                              das machen gute Datei-Öffnen-Dialoge moderner grafischer Oberflächen auch.

                              Und die Information um welche Datei es sich dabei handelt soll Ihm stets vorliegen können.

                              Na gut, für den Pfad brauchst du tatsächlich etwas „Magie“.

                              Viele Grüße
                              Robert

                      2. Hallo

                        Man soll aber das Formularfeld wieder aufrufen können, um beispielsweise sehen zu können um welches Bild es sich dabei handelt. Und das ist ja die ganze Zeit meine Frage, wie ich das denn beim Aufruf des Formulars erreichen kann?

                        Deine Aufgabenstellung in Einzelteile zu zerlegen und sie Stück für Stück abzuarbeiten, ist schon deine Aufgabe.

                        1. Dateinamen im lokalen Kontext des Uploaders ermitteln. Das scheint ja mittlerweile zu funktionieren.
                        2. Datei an den Server übermitteln/hochladen. Übergabe auch des ermittelten lokalen Dateinamens in einem eigenen Formularfeld.
                        3. Speichern der Datei und der Stammdaten inklusive des ermittelten und beim senden mit übertragenen lokalen Dateinamens. Ich habe jetzt nicht den Thread durchgelesen, um die Art der Speicherung in Erfahrung zu bringen. Aber wenn du eh schon irgendwelche Daten zu der Datei speicherst, wirst du wissen, wie das geht.

                        Das alles muss im Prozess des Uploads erfolgen.

                        Bei der Ausgabe der Stammdaten steht dir nun auch der ursprünglich ermittelte Dateinamen zur Verfügung. Wenn dir das Händchen dafür fehlt, solche Aufgaben in ihre einzelnen Schritte zu zerlegen, wird's schwer mit dem programmieren.

                        Tschö, Auge

                        --
                        Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
                        Toller Dampf voraus von Terry Pratchett
                      3. Tach!

                        Man soll aber das Formularfeld wieder aufrufen können, um beispielsweise sehen zu können um welches Bild es sich dabei handelt. Und das ist ja die ganze Zeit meine Frage, wie ich das denn beim Aufruf des Formulars erreichen kann?

                        Also bisher hab ich deinen Ausführungen nicht entnehmen können, dass die die Anzeige des Namens zu einem späteren Zeitpunkt benötigst. Ich ging davon aus, dass er sofort zusätzlich zur Vorschau des Bildes zu sehen sein soll.

                        Wenn du irgendwelche Daten später benötigst, dann musst du sie irgendwo zwischenspeichern. Das geht serverseitig in einer Session oder einer Datenbank und muss dazu irgendwie übertragen werden. Clientseitig kann man zum Beispiel im localStorage oder im sessionStorage Daten ablegen.

                        dedlfix.

                        1. Jo Du Hallo,

                          ja ich speicher doch Daten in einer Datenbank/Tabelle! Also dann sprich muss ich das auch mit dem Dateinamen tun? Lässt sich das also nichtmehr aus irgendwelchen, gespeicherten Daten entnehmen? Also brauch ich eine Spalte, wie ja schonmal erwähnt, die den Dateinamen enthält?

                          Ach schade, dass ich dies jetztz schon zig mal fragen durfte. Aber OK. Vielleicht komme ich ja mal zum Erfolg?

                          Auf jeden Fall auf jeden Fall vielen Dank an Dich mit der Hoffnung auf Erfolg!

                          Also auf jeden Fall Danke Gruß Andreas

                          1. Tach!

                            Ach schade, dass ich dies jetztz schon zig mal fragen durfte. Aber OK. Vielleicht komme ich ja mal zum Erfolg?

                            Es tut mir ja leid, aber wenn ich aus deinen Fragen nicht entnehmen kann, was du eigentlich willst, dann kann ich auch nicht direkt auf dein Problem eingehen.

                            ja ich speicher doch Daten in einer Datenbank/Tabelle! Also dann sprich muss ich das auch mit dem Dateinamen tun? Lässt sich das also nichtmehr aus irgendwelchen, gespeicherten Daten entnehmen? Also brauch ich eine Spalte, wie ja schonmal erwähnt, die den Dateinamen enthält?

                            Du kannst nur das aus den gespeicherten Daten nehmen, was darin ist. Ein Dateiname ist eine Meta-Information und gehört nicht zum Inhalt. Deswegen kannst du ihn nicht aus einer Datei nehmen, sondern musst ihn separat speichern. Davon abgesehen kann es im Einzelfall sein, dass irgendein Programm etwas in eine Datei geschrieben hat, das vielleicht mal ein Dateiname war. Aber Betriebssysteme und Dateisysteme ändern keine Inhalte. Es gibt keine allgemeingültige Norm, mit der systemübergreifend Metadaten zu Dateien in ihnen selbst abgelegt werden können.

                            Also konkret und kurz, wenn du einen Dateinamen brauchst, musst du dich selbst darum kümmern.

                            dedlfix.

                  2. Tach!

                    doch vielleicht verstehe ich irgend was nicht. Denn ich sehe überall kein Ergebnis!

                    Variablen und auch Objekte zeigen nicht von sich aus ein wie auch immer geartetes Ergebnis an. Du kannst aber ihren Wert verwenden. Und dabei ist es kein Unterschied, ob das eine einfache Variable ist oder eine Eigenschaft eines Objekts. Um mal zwei Möglichkeiten zu zeigen:

                    console.log(file.name);
                    irgendeinElement.innerText = file.name;
                    

                    file ist dabei das File-Objekt, so wie im ersten Beispiel im MDN.

                    Und soll es also dann nur so sein dass ich den Dateinamen in eine separate/zweite Spalte setze, um sie darstellen zu können?

                    Ja, dann musst du den Wert in der Eigenschaft name des File-Objekts dem InnerText des Elements zuweisen, da wo du es angezeigt bekommen möchtest.

                    Das Arbeiten mit der FileAPI oder anderen ist keine Raketenwissenschaft. Alles basiert auf den Grundlagen von Javascript und dem Arbeiten mit dem DOM. Variablen und Objekte werden da genauso verwendet wie überall.

                    dedlfix.