Path: csiph.com!weretis.net!feeder4.news.weretis.net!feeder5.news.weretis.net!news.solani.org!.POSTED!not-for-mail From: Thomas 'PointedEars' Lahn Newsgroups: de.comp.lang.javascript Subject: Re: JS Variable von einem Teil zum =?UTF-8?B?bsOkY2hzdGVuIMO8YmVyZ2ViZW4/?= Date: Tue, 10 Jan 2017 13:57:48 +0100 Organization: PointedEars Software (PES) Lines: 150 Message-ID: <2879807.44csPzL39Z@PointedEars.de> References: <1795891.oMNUckLgyt@PointedEars.de> <11716715.uLZWGnKmhe@PointedEars.de> Reply-To: Thomas 'PointedEars' Lahn Mime-Version: 1.0 Content-Type: text/plain; charset="UTF-8" Content-Transfer-Encoding: 8Bit X-Trace: solani.org 1484053070 10851 eJwNysENADEIA7CVmh4JMA5CsP8I169lfoLaTZRxueg4oWTWBPIA/UDWfUs0D79sW9Yk5r79AwKMEHo= (10 Jan 2017 12:57:50 GMT) X-Complaints-To: abuse@news.solani.org NNTP-Posting-Date: Tue, 10 Jan 2017 12:57:50 +0000 (UTC) User-Agent: KNode/4.14.2 X-Face: %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&. 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]); }; Herausfinden kann man das mit den in Browsern eingebauten oder hinzufügbaren Entwicklertools: > 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: | | Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.