jQuery .post()

M

MsWord

Mitglied
Hallo,

ich möchte gerne ein Multiupload mit jQuery und PHP realisieren.
Das ist ein Formular welches auch normal abgeschickt werden kann (um alles andere zu speichern),
nur den Anhang möchte ich mit Hilfe von jQuery zuvor uploaden.
Ich habe einige Scripts mit Ajax gefunden, welche mir so nicht wirklich weiter helfen. (Bin wahrscheinlich zu blöd diese für meine Bedürfnisse anzupassen)
Auf jedenfall bin ich auf die jQuery Funktion .post() gestoßen.
Normale Felder damit zu übergeben ist auch kein Problem, nur die File-Input gehen halt nicht.

Nun wollte ich fragen, ob man die .post() Funktion dafür überhaupt nutzen kann?

Hier mein HTML-Code:
HTML: 
 <!-- <form action="....." method="post"> [...] -->
                              <div class="form-group clearfix">
                                    <div class="col-md-8">
                                        <input type="file" name="appendix[]" multiple>
                                        <span class="text-muted small">Wenn du die "Strg"-Taste gedrückt hälst, kannst du mehrere Dateien auswählen</span>
                                    </div>
                                    <div class="col-md-4">
                                        <button type="button" class="btn btn-block btn-success appendix-upload-button" data-eventid="<?php echo $event; ?>"><i class="fa fa-upload"></i> Hochladen</button>
                                    </div>
                               </div>
<!-- [....]</form> -->

Hier mein Javascript Code:
Javascript: 
        $(".appendix-upload-button").click(function(){
            var eventid = $(this).data('eventid');
            var fileval = $('input:file').val();
            $.post("run.js.php?p=projects&file=upload", {appendix: fileval, eventid: eventid}).done(function(data) {
                alert(data);
            });
        });

Der PHP-Teil ist unwichtig, den habe ich schon, funktioniert auch wenn man normal das Formular abschickt.


Schon mal vielen Dank für eure Hilfe!!!
 
Hi,

nur mit jQuery und Ajax wird das nicht (kaum) funktionieren.

Moderne Browser kennen jedoch das FormData-Objekt. Damit sollte sich ein Upload von Dateien (auch mehreren) realisieren lassen.

Ein Beispiel - ungetestet:
Javascript: 
$(".appendix-upload-button").click(function() {
    var eventid = $(this).data('eventid'),
        files = $('input:file')[0].files, // FileList des input-Feldes vom Typ "file"
        data = new FormData();            // FormData-Objekt instaziieren

    $.each(files, function(key, value) {
        data.append(key, value);
    });

    data.append('appendix', eventid);

    $.ajax({
        url: 'run.js.php?p=projects&file=upload',
        data: data,
        type: 'post',
        processData: false,
        contentType: false,
        success: function() {
            console.log('arguments: ', arguments);
        }
    });
});
Da wirst du sicherlich noch ein paar Kleinigkeiten anpassen müssen. Die Vorgehensweise sollte aber klar ersichtlich sein.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück