Groups | Search | Server Info | Keyboard shortcuts | Login | Register

Groups > de.comp.lang.javascript > #4840

Re: JS Variable von einem Teil zum nächsten übergeben?

Show all headers | View raw

Jan Novak wrote:

> Am 10.01.2017 um 11:11 schrieb Thomas 'PointedEars' Lahn:
>>> Ich nutze das krajee plugin um previews an zu zeigen. Leider habe ich
>>> nichts anderes (freies) gefunden.
>> Nicht gefunden: Wie hast Du gesucht?
> 
> Auf die übliche Weise im Internet nach "preview Plugins" für html/php,
> welche OS sind. Kennst du eine bessere Wahl?

Man könnte/sollte noch den Suchbegriff „JavaScript“ ergänzen.  Da Du aber 
schon Bootstrap gefunden hast, würde ich zuerst in dessen Dokumentation 
suchen statt mit Google.

> Ich habe eine Form, in welcher eine DropDown Box existiert, in welcher 
> Werte (URL's)
         ^^^^^
_URLs_

> stehen

Darin stehen vermutlich _Optionen_ (option-Elemente) mit Dateinamen als 
_Beschriftung_ (Inhalt der option-Elemente), und jede dieser Optionen hat 
einen URL _einer Grafikressource_ als _Wert_ (value-Attribut).

Statt lange darum herumzureden hättest Du also einfach einen Auszug des 
generierten Markups posten können und sollen.

> (welche mit dem Krajee Plugin
                  ^^^^^^^^^^^^^
_“Bootstrap File Input”-Plugin_

> angezeigt werden sollen) und beim Wechsel des Objektes im DropDown
                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
bei _Auswahl eines Eintrags_ _des_ _Dropdowns_

> genau diese URL an das Plugin übergeben, um den Preview zu erzeugen.  Ich
> hoffe, das ist jetzt verständlich.

Ja, jetzt schon eher.

(Du unterliegst anscheinend dem Irrtum, dass *ich* nicht wüsste, wovon *ich* 
rede.)

> Eigentlich nichts besonderes.

Richtig: Deshalb …

>> Wie ich schon schrieb: Du brauchst dafür kein Plugin.
> 
> ???

Ich verstehe das jetzt mal als die wesentlich höflichere Frage
„Wie geht das denn, bitte?“.

Du kannst entweder

  a) ein img-Elementobjekt erzeugen, dessen src-Eigenschaft auf den URL 
     setzen und es bei Erfolg dem Dokument hinzufügen:

       var img = document.createElement("img");

       if (img)
       {
         img.onload = function () {
           console.log(this.src, this.width, this.height);
           document.body.appendChild(this);
         };

         img.src = "…";
       }

oder

  b) die src-Eigenschaft eines vorhandenen img-Elementobjekts im Dokument
     setzen:

       var img = document.getElementById("img-foo");

       if (img)
       {
         img.onload = function () {
           console.log(this, this.src, this.width, this.height);

           /* Dokument mit der Information aktualisieren */
         };

         img.src = "…";
       }
       else
       {
         console.error("Fehler auf Layer 8");
       }

Das Erzeugen eines neuen img-Elementobjekts für die neue Grafik bzw. eines, 
welches noch nie in einem gerenderten Elementbaum hing, hat den Vorteil, 
dass seine width- und height-Eigenschaften die richtigen Dimensionen der 
neuen Grafik angeben (falls das unterstützt wird), selbst wenn die width- 
und height-Attribute des vorhandenen img-Elements (anders) angegeben wurden 
(dies lässt sich im Event-Listener des img-Elementobjekts nicht 
unterscheiden).  Man kann dann anschliessend den src-Eigenschaftswerte des 
neuen Objekt der src-Eigenschaft des vorhandenen zuweisen (und braucht 
dessen load-Event nicht mehr zu behandeln).

Im Grunde nichts anderes als das Setzen der src-Eigenschaft eines img-
Elementobjekts macht nämlich das “Bootstrap File Input”-Plugin:

Bei Angabe eines URI in der initialPreview-Eigenschaft des Optionsobjekts 
direkt – sinngemäss:

  img.src = options.initialPreview[0];

Bei Auswahl einer lokalen Datei wird deren Inhalt in einen data-URI 
umgewandelt und dieser der src-Eigenschaft zugewiesen (die lokale Datei
wird vom Browser nicht ohne Benutzeraktion direkt angezeigt – das verbietet 
die Same Origin Policy aus Sicherheitsgründen –, sondern zum Rendern im 
Browser vom Script *nach Benutzeraktion* ausgelesen[1] und 
*rekonstruiert*) – sinngemäss:

  input.onchange = function (event) {
    var reader = new FileReader();

    reader.onload = function (event) {
      img.src = event.target.result;
    };

    reader.readAsDataURL(event.target.files[0]);
  };

<https://developer.mozilla.org/de/docs/Zugriff_auf_Dateien_von_Webapplikationen>

Herausfinden kann man das mit den in Browsern eingebauten oder hinzufügbaren 
Entwicklertools: <http://devtoolsecrets.com/>
 
> Ich will nicht das Rad neu erfinden. Die Möglichkeiten, welche zum
> Beispiel das Krajee Plugin bietet sind sehr schön.
               ^^^^^^^^^^^^^
_“Bootstrap File Input”-Plugin_

> Das möchte ich nicht per Hand nachbauen.

Dann benutze es doch einfach, genau so wie es ich Dir vorgeschlagen hatte.

Wo ist das Problem?

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

Back to de.comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar

Thread

JS Variable von einem Teil zum nächsten übergeben? Jan Novak <repcom@gmail.com> - 2017-01-09 08:53 +0100
  Re: JS Variable von einem Teil zum nächsten übergeben? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-01-09 20:44 +0100
    Re: JS Variable von einem Teil zum nächsten übergeben? Jan Novak <repcom@gmail.com> - 2017-01-10 08:52 +0100
      Re: JS Variable von einem Teil zum nächsten übergeben? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-01-10 11:11 +0100
        Re: JS Variable von einem Teil zum nächsten übergeben? Jan Novak <repcom@gmail.com> - 2017-01-10 12:20 +0100
          Re: JS Variable von einem Teil zum nächsten übergeben? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-01-10 13:57 +0100
            Re: JS Variable von einem Teil zum nächsten übergeben? Jan Novak <repcom@gmail.com> - 2017-01-11 10:50 +0100
              Re: JS Variable von einem Teil zum nächsten übergeben? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-01-11 14:08 +0100
                Re: JS Variable von einem Teil zum nächsten übergeben? Jan Novak <repcom@gmail.com> - 2017-01-11 14:31 +0100
                Re: JS Variable von einem Teil zum nächsten übergeben? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-01-11 15:34 +0100
            Re: JS Variable von einem Teil zum nächsten übergeben? Jan Novak <repcom@gmail.com> - 2017-01-11 16:46 +0100
              Re: JS Variable von einem Teil zum nächsten übergeben? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-01-11 18:09 +0100
                Re: JS Variable von einem Teil zum nächsten übergeben? Jan Novak <repcom@gmail.com> - 2017-01-12 10:18 +0100

csiph-web