Markus S.: Inputfelder

<input type="url"> 
<input type="submit"> 
<div id="tierbilder"></div>

ich will in das erste Eingabefeld einen Dateinamen z.B. (Stier) eingeben und das Bild soll im [div id="tierbilder"] angezeigt werden. Die Bilderdaten sind auf meinem C:Laufwerk. Die Website soll nur privat sein. Also nicht im Internet veröffentlicht.

Ich bitte um Hilfe.

  1. Servus!

    <input type="url"> 
    <input type="submit"> 
    <div id="tierbilder"></div>
    

    ich will in das erste Eingabefeld einen Dateinamen z.B. (Stier) eingeben und das Bild soll im [div id="tierbilder"] angezeigt werden.

    So weit ich das überblicke, wäre das eher ein Fall für select. Als Auswahlmöglichkeiten kannst du dort die Bilder notieren.

    Die Bilderdaten sind auf meinem C:Laufwerk. Die Website soll nur privat sein. Also nicht im Internet veröffentlicht.

    Du bräuchtest ja auf jeden Fall ein Skript, dass den Text deiner Eingabe mit den Dateinnamen deiner Bilder vergleicht, um mögliche, vorhandene Bilder anzuzeigen.

    Ich bitte um Hilfe.

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun - packen wir's an: ToDo-Liste gewünschte Seiten
    1. [versehentliches Vollzitat]

      1. Gibt es hierzu fertige SkriptE? wenn ja, wo finde ich diese?

        1. Gibt es hierzu fertige SkriptE? wenn ja, wo finde ich diese?

          nicht bei SELF- sondern bei FertigHTML

          GLG Regina

        2. Tach!

          Gibt es hierzu fertige SkriptE? wenn ja, wo finde ich diese?

          Ja, mit einer Suchmaschine. Stichwörter: Upload mit Vorschau (oder preview)

          dedlfix.

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

          1. Hallo Rolf,

            Ohne einen Webserver oder das FileSystemObject des IE wird mehr nicht möglich sein.

            möglich wäre eine Batch-Datei, die das Bildverzeichnis ausliest und das Ergebnis als Datenbasis in eine Textdatei (.js) schreibt, die dann mittels JavaScript eingelesen und ausgewertet wird. Die .bat kann manuell oder zeitgesteuert angestossen werden.

            Grüße, Martl

            (Wenn Plan A nicht funktioniert: Keine Panik, das Alphabet hat noch weitere 25 Buchstaben)

            1. Ja guuuuut.....

              Aber damit kommst Du in die Bereiche, wo ich anfangen würde, in Richtung Wien zu Herrn I. Skiljan zu schielen.

              (Pluspunkte für alle, die ohne Google wissen was ich meine ;-) )

              Rolf

              1. ... Wien zu Herrn I. Skiljan zu schielen.

                ... und wenn ich dann die Brille aufsetze, komme ich darauf, daß so gut wie jedes graphisch orientierte Betriebssystem einen Bildbetrachter mitliefert. Die Frage war aber nicht: "Ist das sinnvoll?", sondern eher: "Wie kriege ich es hin?".

                Grüße, Martl

                (Wenn Plan A nicht funktioniert: Keine Panik, das Alphabet hat noch weitere 25 Buchstaben)