Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > de.comp.lang.javascript > #4835 > unrolled thread

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

Back to article view | Back to de.comp.lang.javascript

Contents

  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

#4835 — JS Variable von einem Teil zum nächsten übergeben?

Hallo,

nach tagelanger Suche ist dies hier meine letzte Hoffnung. Ich habe in 
php und laravel als Framework (wobei das nebensächlich ist) folgende 
Daten, welche einen Preview erzeugen:

<div class="col-md-3">
	<input id="filedata" name="input-pd[]" type="file" multiple 
class="file-loading">
	<script>
		$("#filedata").fileinput({
			initialPreview: ["MEIN_VAR"],
			uploadAsync: true,
			minFileCount: 1,
			maxFileCount: 5,
		});
	</script>						
</div>

Die Variable MEIN_VAR enthält die URL zur Datei, welche angezeigt werden 
soll. Nun soll diese Anzeige der Datei über JS aus einem Dropdown auf 
dieser Form die entsprechenden Daten erhalten. Dazu habe ich folgendes:


<script type="text/javascript">
	$("select[name='fileNames']").change(function(){
		var fileId = $(this).val();
		var token = $("input[name='_token']").val();
		$.ajax({
			url: "<?php echo route('select-ajax') ?>",
			type: 'POST',
			data: {fileId:fileId, _token:token},
			success: function(data) {
				window.alert(fileId);
			}
		});
	});
</script>

Im Alert bekomme ich die ID der Datei, welche aus dem Dropdown gewählt 
wurde. jedoch wird die Route nie aufgerufen (in welcher die ID der 
gesuchten URL gefunden werden würde). Wie kann ich diese Info jetzt 
nutzen, um die zugehörige URL an die obige Preview Funktion zu übergeben?

Jan

[toc] | [next] | [standalone]

#4836

Jan Novak wrote:

> […] folgende Daten, welche einen Preview erzeugen:
> 
> <div class="col-md-3">
> <input id="filedata" name="input-pd[]" type="file" multiple
> class="file-loading">
> <script>
> $("#filedata").fileinput({
> initialPreview: ["MEIN_VAR"],
> uploadAsync: true,
> minFileCount: 1,
> maxFileCount: 5,

Aus Kompatibilitätsgründen sollte in dieser Zeile am Ende kein Komma stehen.

> });
> </script>
> </div>
> 
> Die Variable MEIN_VAR enthält die URL zur Datei, welche angezeigt werden
> soll. Nun soll diese Anzeige der Datei über JS aus einem Dropdown auf
> dieser Form die entsprechenden Daten erhalten. Dazu habe ich folgendes:

OK.

> <script type="text/javascript">
> $("select[name='fileNames']").change(function(){

  $("select[name='fileNames']").on("change", function () {

> var fileId = $(this).val();
> var token = $("input[name='_token']").val();
> $.ajax({
> url: "<?php echo route('select-ajax') ?>",
> type: 'POST',
> data: {fileId:fileId, _token:token},
> success: function(data) {
> window.alert(fileId);
> }
> });
> });
> </script>
> 
> Im Alert bekomme ich die ID der Datei, welche aus dem Dropdown gewählt
> wurde. jedoch wird die Route nie aufgerufen

Was bedeutet „wird die Route nie aufgerufen“?

Falls Du damit meinst, dass kein POST-Request an den in der url-Eigenschaft 
angegebenen URI stattfindet, so wäre das offensichtlich falsch, da 
window.alert(…) gemäss Deiner eigenen Aussage aufgerufen wird.  Letzteres 
passiert nur, wenn der POST-Request erfolgreich war (“success”).

Grundsätzlich hilft es, sich hier an dem vom Server *generierten* 
*clientseitigen* Quelltext zu orientieren.

> (in welcher die ID der gesuchten URL gefunden werden würde).

Nein, wahrscheinlich nicht.

> Wie kann ich diese Info jetzt nutzen, um die zugehörige URL an die obige
> Preview Funktion zu übergeben?

Theoretisch könntest Du das von Dir möglicherweise verwendete “Bootstrap 
File Input”-Plugin mit einem anderen Wert für die initialPreview-Eigenschaft 
des Optionsobjektes immer wieder neu initialisieren:

<http://plugins.krajee.com/file-input>

Das wäre aber sehr wahrscheinlich ein Missbrauch dieses für den Datei-
*Upload* vorgesehenen Plugins.

Beschreibe das *Problem* und das *Ziel*, nicht nur Deine Lösungsversuche.

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

[toc] | [prev] | [next] | [standalone]

#4837

Am 09.01.2017 um 20:44 schrieb Thomas 'PointedEars' Lahn:

>> Wie kann ich diese Info jetzt nutzen, um die zugehörige URL an die obige
>> Preview Funktion zu übergeben?
>
> Theoretisch könntest Du das von Dir möglicherweise verwendete “Bootstrap
> File Input”-Plugin mit einem anderen Wert für die initialPreview-Eigenschaft
> des Optionsobjektes immer wieder neu initialisieren:

Drum geht es!

> <http://plugins.krajee.com/file-input>
>
> Das wäre aber sehr wahrscheinlich ein Missbrauch dieses für den Datei-
> *Upload* vorgesehenen Plugins.
>
> Beschreibe das *Problem* und das *Ziel*, nicht nur Deine Lösungsversuche.


GENAU DARUM GEHT ES.
Ich nutze das krajee plugin um previews an zu zeigen. Leider habe ich 
nichts anderes (freies) gefunden.

Ich habe eine Form in der in einem DropDown Files stehen, Beim wechseln 
der Auswahl soll das entsprechende Preview angezeigt werden.

Jan

[toc] | [prev] | [next] | [standalone]

#4838

Jan Novak wrote:

> Am 09.01.2017 um 20:44 schrieb Thomas 'PointedEars' Lahn:
>>> Wie kann ich diese Info jetzt nutzen, um die zugehörige URL an die obige
>>> Preview Funktion zu übergeben?
>> Theoretisch könntest Du das von Dir möglicherweise verwendete “Bootstrap
>> File Input”-Plugin mit einem anderen Wert für die
>> initialPreview-Eigenschaft des Optionsobjektes immer wieder neu
>> initialisieren:
> 
> Drum geht es!

Was hindert Dich daran, es zu tun?
 
>> <http://plugins.krajee.com/file-input>
>>
>> Das wäre aber sehr wahrscheinlich ein Missbrauch dieses für den Datei-
>> *Upload* vorgesehenen Plugins.
>>
>> Beschreibe das *Problem* und das *Ziel*, nicht nur Deine Lösungsversuche.
> 
> GENAU DARUM GEHT ES.

Bitte hier nicht herumSCHREIEN.

Du hast wieder nicht geschrieben, welche Daten Du konkret hast und was damit 
wann konkret passieren soll.

<http://www.tty1.net/smart-questions_de.html#symptoms>
<http://texwelt.de/wissen/fragen/5133/meta-was-ist-das-xy-problem>

> Ich nutze das krajee plugin um previews an zu zeigen. Leider habe ich
> nichts anderes (freies) gefunden.

Nicht gefunden: Wie hast Du gesucht?

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

> Ich habe eine Form in der in einem DropDown Files stehen,

In einem _Dropdown_ stehen keine “Files”.  Solange Du nicht 
schreibst/zeigst, was Du konkret tust, kann man nur raten.  

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

[toc] | [prev] | [next] | [standalone]

#4839

Am 10.01.2017 um 11:11 schrieb Thomas 'PointedEars' Lahn:

>>> Theoretisch könntest Du das von Dir möglicherweise verwendete “Bootstrap
>>> File Input”-Plugin mit einem anderen Wert für die
>>> initialPreview-Eigenschaft des Optionsobjektes immer wieder neu
>>> initialisieren:
>>
>> Drum geht es!
>
> Was hindert Dich daran, es zu tun?

Na genau *deine_Aussage* : "Das wäre aber sehr wahrscheinlich ein 
Missbrauch dieses für den Datei-*Upload* vorgesehenen Plugins."

> Du hast wieder nicht geschrieben, welche Daten Du konkret hast und was damit
> wann konkret passieren soll.

... ich will es gerne noch einmal detaillierter aufzählen:
Ich habe eine Form, in welcher eine DropDown Box existiert, in welcher 
Werte (URL's) stehen (welche mit dem Krajee Plugin angezeigt werden 
sollen) und beim Wechsel des Objektes im DropDown genau diese URL an das 
Plugin übergeben, um den Preview zu erzeugen.
Ich hoffe, das ist jetzt verständlich.
Eigentlich nichts besonderes. Mir geht es darum, wie ich aus dem 
Javascript (welchen ich im 1. Post geschrieben habe), welcher bei 
"change" des DropDowns aufgerufen wird, den Wert an das Krajje Plugin 
für den Preview übergeben kann (initial preview).

>> 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?


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

???
Ich will nicht das Rad neu erfinden. Die Möglichkeiten, welche zum 
Beispiel das Krajee Plugin bietet sind sehr schön. Das möchte ich nicht 
per Hand nachbauen.

Jan

[toc] | [prev] | [next] | [standalone]

#4840

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.

[toc] | [prev] | [next] | [standalone]

#4841

Am 10.01.2017 um 13:57 schrieb Thomas 'PointedEars' Lahn:

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

Nein, ich bin mir dessen bewusst, dass ich nicht alle Fachbegriffe 
kenne ;-)

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

Wieso nicht? Alternative wärfe doch dann, es selbst zu schreiben!?

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

Ja, sehr gerne!


> Du kannst entweder
...
> oder

werde beide Möglichkeiten ausprobieren (in den nächsten Wochen).

> _“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?

Das wollte, bzw. mache ich ja. Aber *du* hattes geschrieben (ich 
zitiere): "Das wäre aber sehr wahrscheinlich ein Missbrauch dieses für 
den Datei-*Upload* vorgesehenen Plugins."

Daher meine Verwirrung!

mfg

Jan

[toc] | [prev] | [next] | [standalone]

#4842

Jan Novak wrote:

> Am 10.01.2017 um 13:57 schrieb Thomas 'PointedEars' Lahn:
>> oder
> 
> werde beide Möglichkeiten ausprobieren (in den nächsten Wochen).

Gut.

>> _“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?
> 
> Das wollte, bzw. mache ich ja. Aber *du* hattes geschrieben (ich
> zitiere): "Das wäre aber sehr wahrscheinlich ein Missbrauch dieses für
> den Datei-*Upload* vorgesehenen Plugins."
> 
> Daher meine Verwirrung!

Soifz. [psf 10.1]

Alle unsere Kristallkugeln sind leider derzeit eingeschneit bzw. gefroren.  
Meine Aussagen können daher nur auf dem basieren, was Du uns hier mitteilst.

Ich verstehe Deine Aussagen so, dass Du dieses Plugin nur zur Anzeige einer 
Vorschau von Grafikressourcen verwenden willst.

Dafür ist es aber nicht entwickelt worden, sondern vor allem zum *Upload* 
von (Grafik)dateien.  Die initialPreview (dt. „*anfängliche* Vorschau“)-
Option gibt es deshalb, damit man die Dateien anzeigen kann, die schon 
hochgeladen wurden (indem man deren URLs angibt), und denen der Benutzer 
dann *weitere* hinzufügen kann.

Daher habe ich geschrieben, dass das was Du (anscheinend) willst 
*wahrscheinlich* ein Missbrauch dieses Plugins wäre; nämlich, es *nur* für 
die Vorschaufunktion zu benutzen.  Das Problem – welches mir bei einem 
Plugin mit dem Namen “Bootstrap File *Upload*” zu offensichtlich schien, als 
dass ich es erwähnen müsste – ist nämlich, dass der Benutzer dann auch 
Dateien *hochladen* kann bzw. ihm dieser Eindruck vermittelt wird, auch wenn 
Du das vielleicht gar nicht willst und serverseitig vorgesehen hast.  Da 
gibt es dann *vermutlich*, insbesondere innerhalb Bootstrap, bessere 
Lösungen, wenn man denn dafür nur wenig eigenen Code schreiben will.

Andererseits braucht man – wie ich Dir auch gezeigt habe – nur sehr wenig 
eigenen Code zu schreiben, um die Vorschau-Funktionalität ohne Plugin zu 
realisieren.  Das meiste kann man sogar dem Plugin-Code entnehmen, wenn man 
dessen Darstellung übernehmen will.

Wenn Du aber darauf bestehst, dieses Plugin trotzdem unverändert zu benutzen 
(vielleicht hast Du ja sogar gute Gründe dafür, die Du uns nur noch nicht 
genannt hast; in Deinen Postings fe lt das “big picture” – siehe „XY-
Problem“), dann kannst Du es zur Erreichung Deines Ziels so benutzen, wie 
ich es beschrieben habe.

Und da verstehe ich nicht, worin die Schwierigkeit bestehen soll, dies zu 
tun.  Du hast den Eindruck vermittelt, dass Du weisst, wie man das Plugin 
initialisiert.  Wenn das aber so ist, worin besteht jetzt Dein Problem, es 
bei Bedarf erneut zu initialisieren (ich habe auch nicht gesagt, dass das 
funktionieren muss; das war nur eine Idee)?  Wenn nicht, weshalb vermittelst 
Du diesen Eindruck bzw. weshalb fragst Du nicht konkret *danach*?

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

[toc] | [prev] | [next] | [standalone]

#4843

Am 11.01.2017 um 14:08 schrieb Thomas 'PointedEars' Lahn:

> Ich verstehe Deine Aussagen so, dass Du dieses Plugin nur zur Anzeige einer
> Vorschau von Grafikressourcen verwenden willst.

Nun... nein. Ich verwende es primär zum upload. Als ich dann aber sah, 
wie schön (und einfach) dieses Plugin (zu nutzen) ist, kam mir die Idee, 
es ebenfalls zum anzeigen der Grafiken zu benutzen. Das zum Hintergrund.
Nachteil ist, dass die Grafiken, bzw. "Dokumente", im erreichbaren Pfad 
liegen müssen, was ich aber aufgrund der sehr nützlichen 
Anzeige-Funktionen verschmerzen würde.
Bisher hatte ich Dokumente, welche nicht im öffentlich erreichbaren 
Bereich liegen, als Stream geöffnet und dann entsprechend zur Ausgabe 
gebracht.

> Daher habe ich geschrieben, dass das was Du (anscheinend) willst
> *wahrscheinlich* ein Missbrauch dieses Plugins wäre; nämlich, es *nur* für
> die Vorschaufunktion zu benutzen.

Ja, das war dann wohl ein Missverständnis, bzw. habe ich mich nicht klar 
genug ausgedrückt. Sorry.


> Andererseits braucht man – wie ich Dir auch gezeigt habe – nur sehr wenig
> eigenen Code zu schreiben, um die Vorschau-Funktionalität ohne Plugin zu
> realisieren.  Das meiste kann man sogar dem Plugin-Code entnehmen, wenn man
> dessen Darstellung übernehmen will.

Ich weiss nicht, ob ich mich da herantraue. Habe von JS soviel Ahnung 
wie n' Ochse auf der Weide vom Universum ;-)


> Wenn Du aber darauf bestehst, dieses Plugin trotzdem unverändert zu benutzen
> (vielleicht hast Du ja sogar gute Gründe dafür, die Du uns nur noch nicht
> genannt hast; in Deinen Postings fe lt das “big picture” – siehe „XY-
> Problem“), dann kannst Du es zur Erreichung Deines Ziels so benutzen, wie
> ich es beschrieben habe.

Das ist im Moment der Plan A...

Aber wie immer gibt es viele Wege nach Rom, ich hätte zum Beispiel 
lieber eine Preview ohne JS erzeugt, andererseits kann man auch nicht 
alles haben... jaja... ist alles nicht so einfach ;-)

Jan

[toc] | [prev] | [next] | [standalone]

#4844

Jan Novak wrote:

> Am 11.01.2017 um 14:08 schrieb Thomas 'PointedEars' Lahn:
>> Ich verstehe Deine Aussagen so, dass Du dieses Plugin nur zur Anzeige
>> einer Vorschau von Grafikressourcen verwenden willst.
> 
> Nun... nein. Ich verwende es primär zum upload. Als ich dann aber sah,
> wie schön (und einfach) dieses Plugin (zu nutzen) ist, kam mir die Idee,
> es ebenfalls zum anzeigen der Grafiken zu benutzen. Das zum Hintergrund.

OK, dann solltest Du es tun.

> Nachteil ist, dass die Grafiken, bzw. "Dokumente", im erreichbaren Pfad
> liegen müssen, was ich aber aufgrund der sehr nützlichen
> Anzeige-Funktionen verschmerzen würde.
> Bisher hatte ich Dokumente, welche nicht im öffentlich erreichbaren
> Bereich liegen, als Stream geöffnet und dann entsprechend zur Ausgabe
> gebracht.

Du kannst mit URL-Rewrite und transparentem Proxying dafür sorgen, dass
die Dateien ausserhalb des DOCUMENT_ROOT gespeichert bleiben können, und 
trotzdem per URL erreichbar sind.

Apache: <http://httpd.apache.org/docs/current/rewrite/>

Oder einfach den Stream-URL verwenden ;-)

>> Daher habe ich geschrieben, dass das was Du (anscheinend) willst
>> *wahrscheinlich* ein Missbrauch dieses Plugins wäre; nämlich, es *nur*
>> für die Vorschaufunktion zu benutzen.
> 
> Ja, das war dann wohl ein Missverständnis, bzw. habe ich mich nicht klar
> genug ausgedrückt. Sorry.

ACK.

>> Andererseits braucht man – wie ich Dir auch gezeigt habe – nur sehr wenig
>> eigenen Code zu schreiben, um die Vorschau-Funktionalität ohne Plugin zu
>> realisieren.  Das meiste kann man sogar dem Plugin-Code entnehmen, wenn
>> man dessen Darstellung übernehmen will.
> 
> Ich weiss nicht, ob ich mich da herantraue. Habe von JS soviel Ahnung
> wie n' Ochse auf der Weide vom Universum ;-)

Versuch macht kluch – das weisst Du doch gemäss E-Mail am besten.
(Du hast Post.)

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

[toc] | [prev] | [next] | [standalone]

#4845

Am 10.01.2017 um 13:57 schrieb Thomas 'PointedEars' Lahn:

> 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 = "…";
>        }


Ich habe jetzt folgenden JS Code:


<script>
	var img = document.createElement("img");
	// Initiale Datei für die 1. Anzeige
	img.src = 
"http://localhost/archiv/upload/pdf_f7f3ffc6793915dbb6cfa17acab4cb7a.pdf";
			
	//change Funktion der DropDown Liste
	$("select[name='fileNames']").change(function(){
		var fileId = $(this).val();
		var token = $("input[name='_token']").val();
		$.ajax({
			url: "<?php echo route('select-ajax') ?>",
			type: 'POST',
			data: {fileId:fileId, _token:token},
			success: function(data) {
				//gibt "http://localhost/archiv/upload/test.pdf" zurück
				img.src = data;
				console.log(img);
			}
		});
	});

	//funktioniert nur initial, nicht beim Wechsel eines Eintrages der 
DropDown Liste
	$("#filedata").fileinput({
		initialPreview: img.src,
		uploadAsync: true,
		minFileCount: 1,
		maxFileCount: 2,
		showClose: false,
		showCaption: false,
		showRemove: false,
		showUpload: false,
		showBrowse: false,
		showCancel: false,
		showUploadedThumbs: false,
		initialPreviewAsData: true,
		initialPreviewConfig: [
			{type: "pdf", size: 123456}
		]
	});
</script>			


Ich initialisiere oben das img Object mit einer PDF, damit zu 
Testzwecken irgendetwas zu sehen ist. Beim Wechsel eines Elementes aus 
der DropDown Liste wird korrekt in der Konsole geloggt, dass eine neue 
URL in das img Object geschrieben wurde, jedoch wird es im Browser vom 
Plugin nicht angezeigt (aktualisiert).
Fehlt mir hier nur eine neue "load" Eigenschaft?

> 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]);
>   };

Muss ich mich in meinem Code darum kümmern? (und wenn ja, wie?)

Jan

[toc] | [prev] | [next] | [standalone]

#4846

Jan Novak wrote:

> Am 10.01.2017 um 13:57 schrieb Thomas 'PointedEars' Lahn:
>> […]
> 
> Ich habe jetzt folgenden JS Code:

OK.  Bitte aber keine Tab-Zeichen verwenden, die sind überall 
unterschiedlich breit, verschwenden im Normalfall Platz (8 Leerzeichen),
und mein derzeitiger Newsreader entfernt sie leider am Zeilenanfang.
Zwei Leerzeichen sind (nicht nur im Usenet, ausser bei Python) optimal
für eine Einrückung von Quelltext.

Nachfolgend korrigiert; auch so, dass es trotz Zeilenumbruch keinen 
Syntaxfehler gibt.
  
> <script>
>   var img = document.createElement("img");
>   /* Initiale Datei für die 1. Anzeige */
>   img.src = 
> "http://localhost/archiv/upload/pdf_f7f3ffc6793915dbb6cfa17acab4cb7a.pdf";

Ein Schritt in die richtige Richtung.  Aber *nur* zur Speicherung des URIs 
brauchst Du kein img-Elementobjekt zu erzeugen.  Zumal es sich hier nicht 
einmal um eine Grafik handelt.

>   //change Funktion der DropDown Liste
>   $("select[name='fileNames']").change(function () {
>     var fileId = $(this).val();
>     var token = $("input[name='_token']").val();
>     $.ajax({
>       url: "<?php echo route('select-ajax') ?>",
>       type: 'POST',
>       data: {fileId: fileId, _token: token},
>       success: function (data) {
>         /* gibt "http://localhost/archiv/upload/test.pdf" zurück */
>         img.src = data;
>         console.log(img);
>       }
>     });
>   });
> 
>   /* funktioniert nur initial, nicht beim Wechsel eines Eintrages 
>      der DropDown Liste */
>   $("#filedata").fileinput({
>     initialPreview: img.src,

Siehe oben: Hier weist Du der Eigenschaft nur einen String zu.  Es wird so 
_nicht_ ein Bild an das Plugin gebunden (das brauchst Du aber auch nicht).

> // […]
>     initialPreviewAsData: true,
>     initialPreviewConfig: [
>       {type: "pdf", size: 123456}
>     ]
>   });
> </script>           
> 
> 
> Ich initialisiere oben das img Object mit einer PDF, damit zu
> Testzwecken irgendetwas zu sehen ist. Beim Wechsel eines Elementes aus
> der DropDown Liste wird korrekt in der Konsole geloggt, dass eine neue
> URL in das img Object geschrieben wurde, jedoch wird es im Browser vom
> Plugin nicht angezeigt (aktualisiert).
> Fehlt mir hier nur eine neue "load" Eigenschaft?

Nein, sieht nicht so aus, als ob das Plugin das unterstützt.

Wenn Du aber die Initialisierung in den success-Handler kopierst (meine 
ursprüngliche Idee), könnte es funktionieren:

    $.ajax({
      // …
      success: function (data) {
        $("#filedata").fileinput({
          initialPreview: data,
          // […]
          initialPreviewAsData: true,
          initialPreviewConfig: [
            {type: "pdf", size: 123456}
          ]
        });
      }
    });

Falls das funktioniert (und keine offensichtlich negativen Effekte hat), 
solltest Du die Initialisierung in eine Methode auslagern, der Du jeweils 
nur den Wert für die initialPreview-Eigenschaft übergibst (DRY).

>>   input.onchange = function (event) {
>>     var reader = new FileReader();
>>
>>     reader.onload = function (event) {
>>       img.src = event.target.result;
>>     };
>>
>>     reader.readAsDataURL(event.target.files[0]);
>>   };
> 
> Muss ich mich in meinem Code darum kümmern? (und wenn ja, wie?)

Wenn Du das Plugin verwendest, brauchst Du diesen Code nicht, denn das 
Plugin enthält ihn im wesentlichen und erledigt das.

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

[toc] | [prev] | [next] | [standalone]

#4847

Am 11.01.2017 um 18:09 schrieb Thomas 'PointedEars' Lahn:

> Wenn Du aber die Initialisierung in den success-Handler kopierst (meine
> ursprüngliche Idee), könnte es funktionieren:

Der Script Teil sieht jetzt so aus:

<script>
   //change Funktion der DropDown Liste
   $("select[name='fileNames']").change(function(){
     var fileId = $(this).val();
     var token = $("input[name='_token']").val();
     console.log(fileId);
     $.ajax({
       url: "<?php echo route('select-ajax') ?>",
       type: 'POST',
       data: {fileId:fileId, _token:token},
       success: function(data) {
         //gibt je nach "fileId" andere File URL's zurück
         var img = data;
         console.log(img);
         $("#filedata").fileinput({
           initialPreview: img,
           uploadAsync: true,
           minFileCount: 1,
           maxFileCount: 2,
           showClose: false,
           showCaption: false,
           showRemove: false,
           showUpload: false,
           showBrowse: false,
           showCancel: false,
           showUploadedThumbs: false,
           initialPreviewAsData: true,
           initialPreviewConfig: [
             {type: "pdf", size: 123456}
		  ]
         });			
       }
     });
   });
</script>						

Initial wird kein Preview angezeigt (weil ja kein Wechsel des Elementes 
im Drop Down statt findet). Bei einem Wechsel im DropDown wird das 
gewechselte Element im Preview angezeigt, danach aber kein weiteres 
mmehr (bei einem Wechsel). Im Konsolen Log sehe ich die URL's der 
anderen Elemente (beim Wechsel), aber das Preview wird nicht aktualisiert.

Jan

[toc] | [prev] | [standalone]

Back to top | Article view | de.comp.lang.javascript

csiph-web