Ergebnis 1 bis 13 von 13
  1. #1
    meyersan ist offline Jungspund
    registriert
    04-08-2014
    Beiträge
    12

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

    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

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.643

    AW: jQuery - Preview Bild einzeigen vor Upload bei append <form>

    Zitat Zitat von meyersan Beitrag anzeigen
    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?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  3. #3
    meyersan ist offline Jungspund
    registriert
    04-08-2014
    Beiträge
    12

    AW: jQuery - Preview Bild einzeigen vor Upload bei append <form>

    Zitat Zitat von mikdoe Beitrag anzeigen
    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.

  4. #4
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.643

    AW: jQuery - Preview Bild einzeigen vor Upload bei append <form>

    mit "js how to preview upload image" finde ich etliche lösungen in google
    nix dabei für dich?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  5. #5
    meyersan ist offline Jungspund
    registriert
    04-08-2014
    Beiträge
    12

    AW: jQuery - Preview Bild einzeigen vor Upload bei append <form>

    Zitat Zitat von mikdoe Beitrag anzeigen
    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...

  6. #6
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.643

    AW: jQuery - Preview Bild einzeigen vor Upload bei append <form>

    Zitat Zitat von meyersan Beitrag anzeigen
    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?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  7. #7
    meyersan ist offline Jungspund
    registriert
    04-08-2014
    Beiträge
    12

    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.


    HTML-Code:
    $('#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?
    Geändert von mikdoe (28-05-2016 um 18:21 Uhr) Grund: Code Tags

  8. #8
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.643

    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?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  9. #9
    meyersan ist offline Jungspund
    registriert
    04-08-2014
    Beiträge
    12

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

    Die Fehlerkonsole ist durchgehend leer..
    Geändert von mikdoe (02-06-2016 um 21:45 Uhr) Grund: Fullquote entfernt

  10. #10
    meyersan ist offline Jungspund
    registriert
    04-08-2014
    Beiträge
    12

    AW: jQuery - Preview Bild einzeigen vor Upload bei append <form>

    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/
    Geändert von mikdoe (02-06-2016 um 21:44 Uhr) Grund: Fullquote entfernt

  11. #11
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.643

    AW: jQuery - Preview Bild einzeigen vor Upload bei append <form>

    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?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  12. #12
    meyersan ist offline Jungspund
    registriert
    04-08-2014
    Beiträge
    12

    AW: jQuery - Preview Bild einzeigen vor Upload bei append <form>

    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?
    Geändert von mikdoe (02-06-2016 um 21:43 Uhr) Grund: Fullquote entfernt

  13. #13
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.685

    AW: jQuery - Preview Bild einzeigen vor Upload bei append <form>

    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/

Ähnliche Themen

  1. JQUERY - append to parent
    Von TecEye im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 25-06-2015, 18:37
  2. [JQUERY] Jquery Ereignis nach append()
    Von jaxxon1 im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 27-05-2015, 00:32
  3. Antworten: 3
    Letzter Beitrag: 05-12-2010, 17:59
  4. JQuery append?
    Von Maik20 im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 02-12-2010, 15:20
  5. Jquery.append() Iframe IE Problem
    Von katamshut im Forum JavaScript
    Antworten: 8
    Letzter Beitrag: 31-07-2010, 17:10

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •