[FRAGE] jQuery - Preview Bild einzeigen vor Upload bei append <form>

[meyersan]

Hey zusammen,

ich stehe gerade ein wenig auf dem Schlau und hoffe hier kann mir vielleicht einer helfen.


Folgende Situation:

Ich hab auf meiner Webseite einen button, der durch drücken einen neuen div erstellt und darein ein file-upload form erstellt mittels append.
Jetzt möchte ich gerne, sobald eine Datei in dem input file ausgewählt ist, es im gleichen fenster vorerst darstellen ohne neuladen der Seite oder ähnlichem.
Bei meiner bisherigen recherche habe ich zwar einen jquery script gefunden, dieser funktioniert aber leider nicht bei mir. Der grund dafür war, dass das Form nachträglich eingefügt wird...

Auch mein versuch mittels .on() es zu realisieren ging schief.

Der script sollte direkt nachdem eine Datei ausgewählt wird ausgeführt werden, ohne vorher noch einen knopf zu drücken oder so.

Kann mir vielleicht jemand helfen und meine Kopfschmerzen ein wenig lindern?

Ich danke euch schonmal im Vorraus

 

[mikdoe]

Jetzt möchte ich gerne, sobald eine Datei in dem input file ausgewählt ist, es im gleichen fenster vorerst darstellen

was meinst du mit darstellen genau?
gibt es eine webseite die den effekt hat, den du haben möchtest?

 

[meyersan]

was meinst du mit darstellen genau?
gibt es eine webseite die den effekt hat, den du haben möchtest?

Ich würde halt gerne, sobald ein Bild im Input file ausgewählt ist es ohne einen Knopf zu drücken und ohne es die Seite neu zu laden darstellen. Als Ziel ist es, dass ich danach das Bild zuschneiden kann und es dann erst hochgeladen werden soll.

 

[mikdoe]

mit "js how to preview upload image" finde ich etliche lösungen in google
nix dabei für dich?

 

[meyersan]

mit "js how to preview upload image" finde ich etliche lösungen in google
nix dabei für dich?

Leider nein...
Hab selber viele Lösungsvorschläge bei Google gefunden. Diese funktionieren aber leider nicht, da das <Form> mittels .append() nachträglich hinzugefügt worden ist...

 

[mikdoe]

Diese funktionieren aber leider nicht, da das <Form> mittels .append() nachträglich hinzugefügt worden ist...

was heißt denn "funktioniert nicht"? wie sieht der code aus? was stand in der browserkonsole? mit welchem browser wurde getestet?

 

[meyersan]

AW: jQuery - Preview Bild einzeigen vor Upload bei append &lt;form&gt;

Ich hab es jetzt mittels .on() und change hinbekommen, dass sobald eine datei ausgewählt ist, die .on() funktion auslöst. In dieser function steht jetzt die function womit das previewbild angezeigt wird.
Das klappt auch soweit jetzt, das Problem ist erst wenn man das zweite mal das Bild bzw. zum zweiten mal irgendein Bild auswählt wird dieses auch angezeigt. Bei dem ersten versuch löst zwar die on function aus, allerdings nicht die preview function im inneren.

$('#element').on('change', '#inputfile', function () {
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#picturepreview').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $('#element').on('change', '#inputfile', function () {
            readURL(this);
        });
    });

- - - Aktualisiert - - -

Habe es gerade ausprobiert, leider funktioniert es immer noch nicht. Was genau soll denn da falsch gewesen sein?

 

[mikdoe]

AW: jQuery - Preview Bild einzeigen vor Upload bei append &lt;form&gt;

Ist schwer zu sagen ohne Testmöglichkeit. Kannst du ein JS Fiddle davon machen oder kann man sich das irgendwo live anschauen?
Bei jQuery kommt erschwerend hinzu, dass es im Gegensatz zu pure JS die meisten Fehler nicht in der Konsole zeigt. Ist denn die Fehlerkonsole leer?

 

[meyersan]

AW: jQuery - Preview Bild einzeigen vor Upload bei append &lt;form&gt;

Die Fehlerkonsole ist durchgehend leer..

 

[meyersan]

Ich habe es leider erst jetzt geschafft ein jsfiddle zu erstellen. Der aufbau ist identisch mit dem aus meiner Seite, nur aufs wesentliche reduziert.

https://jsfiddle.net/z6pbb2xz/

 

[mikdoe]

ich hab mal eine console meldung eingebaut
https://jsfiddle.net/z6pbb2xz/2/

aber das .on() scheint nicht zu feuern
wie hattest du das denn getestet?

 

[meyersan]

Ich habe mir es gerade angeguckt. Habe eine console meldung vor die readurl function gesetzt. https://jsfiddle.net/z6pbb2xz/3/
Beim ersten Versuch, also das erste mal eine datei auswählen wird die on function schon durchlaufen, nur stoppt es bei dem inneren.

Wenn ich jetzt noch einmal eine Datei auswähle, dann wird diese auch previewed wie ich mir das vorgestellt habe.

Weißt du vielleicht woran es liegt, wie ich das hinbekomme bzw. was meinst du genau mit getestet haben?

 

[kkapsner]

Du setzt den Eventlistener, der was macht, ja auch erst beim ersten Aufruf. Deswegen passiert beim ersten Ändern auch nichts: https://jsfiddle.net/z6pbb2xz/4/