jQuery AJAX-Datei-Upload

Question

Ich versuche, eine Reihe von Dateien in der Ajax-Request ist mein Code hier weitergeben müssen:

$(document).on('click', '#submit_edit_discussion', function (event) { 
    event.preventDefault(); 
    var channel_id = $('#channel_id').val(); 
    var discussion_id = $('#discussion_id').val(); 
    var title = $('#title').val(); 
    var content = $('#content').val(); 
    var image_choice = ['']; 
    var image = ['']; 
    var new_image = ['']; 
    for (var i = 0; i < $('.images').data('images-count'); i++) { 
     image_choice[i] = $('input[name="image_choice_' + i + '"]:checked').val(); 
     image[i] = $('#image_' + i).data('image-id'); 
    } 
    for (var i = 0; i < $('#images_i').val(); i++) { 
     var j = i + 1; 
     new_image[i] = $('#new_image_' + j + '').prop('files')[0]; 
    } 
    $.post('edit', { 
     'content': content, 
     '_token': $('input[name=_token]').val(), 
     'channel_id': channel_id, 
     'title': title, 
     'discussion_id': discussion_id, 
     'image': image, 
     'image_choice': image_choice, 
     'new_image': new_image 
    }, function (data) { 
     console.log(data); 
    }); 
}); 

Das Array new_image enthält die Bilder, wenn ich es einzuloggen, zeigt es richtig, aber wenn ich Fügen Sie es zu den Objektdaten der Postanforderung hinzu, die es nicht funktioniert

Answer 1

Zum Hochladen von Dateien müssen Sie ein FormData Objekt senden, das die Binärdaten enthält. Sie können die Dateien nicht zu Strings serialisieren - was Ihr aktueller Code versucht.

Beachten Sie, dass Sie den Prozess massiv vereinfachen können, indem Sie den Konstruktor FormData verwenden, der ein form Element akzeptiert. Sie können dies erreichen, indem Sie an die submit Ereignis der form anstelle der click der submit Schaltfläche anschließen. Wenn alle Werte nicht innerhalb von input Elementen im Formular enthalten sind, können Sie die Methode append() verwenden, um sie manuell hinzuzufügen.

Die Daten werden dann im FormData-Objekt mit den Schlüsseln der Elemente input ausgefüllt. Beachten Sie, dass Daten in dieser Methode nicht in Arrays bereitgestellt werden können. Jeder einzelne Wert muss einen eigenen Schlüssel haben. Sie können Daten serialisieren/deserialisieren, wenn Sie sie in einem einzigen Schlüssel speichern möchten. Dies muss jedoch manuell auf dem Client bzw. Server erfolgen.

Hier ist eine grundlegende Arbeitsbeispiel:

$(document).on('submit', '#yourForm', function(e) { 
    e.preventDefault(); 

    $.ajax({ 
    url: 'edit', 
    type: 'post', 
    data: new FormData(this), 
    processData: false, 
    contentType: false 
    }, function(data) { 
    console.log(data); 
    }); 
});