Fileupload via jQuery realisieren

[Gast]

Hey Leute

Anscheinend ist ein Dateiupload über Ajax bzw. mit Hilfe von jQuery eine knifflige Sache.

Wenn man danach Googlet handelt auch rund 90% der Ergebnisse von irgendwelchen jQuery Plugins...

Deshalb frage ich mal hier.

Wie muss ich (JS o. jQuery - Seitig) vorgehen, wenn ich ein Formular mit einem Uploadfeld habe und dieses an PHP senden möchte damit ich es dort weiter verarbeiten kann?

Meine ersten und auch einzigen Ansätze waren einfach nur das Uploadfeld auslesen und weitergeben... allerdings kommt man ja mit diesem "Fakepfad" nicht weit.

Ich glaube die paar Zeilen Code muss ich hier jetzt nicht wiedergeben.

Habt jemand Tipps?... oder ist das eine größere Sache die mal nicht eben so funzt?

Viele Dank!

[tkausl]

Ist eine große sache, vorallem wenn das ganze Browserübergreifend funktionieren soll musst du verschiedene "Wege" anbieten können. Nutz am besten gleich ein fertiges jQuery-Plugin oder guck dir an wie die das so machen.

[monolith]

Naja - es kommt drauf an. Wenn du alte Browser ausschließen kannst wird es einfacher. Hier mal JS-Code aus einer tatsächlichen Anwendung, den ich daher modifizieren musste - hoffe es ist verständlich (Kommentare habe ich gerade schnell reineditiert) und ich habe nichts relevantes entfernt:

if (window.FormData) { // Testen ob FormDate vom Browser supportet wird
    var formData = new FormData();

    var fileInput = $('#file').get(0); // #file ist das file input Element

    if (fileInput.addEventListener) {
        fileInput.addEventListener('change', function(event)
        {
            var file = this.files[0]; // Erste Datei nehmen - Multi-Fileupload also hier als nicht aktiv vorausgesetzt

            if (file.type.match(/image.*/)) { // Ggf. (unsichere) Typueberpruefungen machen
                formData.append('form[file]', file); // Datei an das formData-Objekt anhaengen
                //formData.append('form[_token]', $('#form__token').val()); // Ggf. CSRF-Token anfuegen

                var url = '...'; // URL fuer den AJAX request
                jQuery.ajax({
                    type:           'post',
                    url:              url + '/uploadfile',
                    data:           formData,
                    processData:    false,
                    contentType:    false
                }).done(function(data)
                {
                    console.log('Success');

                }).fail(function()
                {
                    console.log('Error - Sorry, your request failed. Please try again');
                }).done(function()
                {
                    // ... sontiges
                });
            } else {
                console.log('Error - Please choose an image file.');
            }
        });
    }
} else {
    console.log('Error - Your browser does not support the FormDate feature. Uploads are not possible.');
}

Vielleicht hilft dir das als Ansatz. Hat in der Entwicklung prima geklappt, wurde allerdings nie im Produktiveinsatz getestet. Als Ausgangspunkt aber womöglich hilfreich.

[rudygotya]

Bin da auch eher bei tklausl. V.a. da es hier auch gute Plugins für gibt ohne den IE8 + IE9 auszuschließen. Bspw https://blueimp.github.io/jQuery-File-Upload/