AJAX Fileupload with jquery

Question

I am currently trying to solve a problem. I have several forms on a single page which get sent to the backend asynchronously via ajax.

Now some of them need to have a fileupload which doesnt break the process, so it alsoneeds to be handled asynchronously.

I am trying to figure it out like that :

// Allgemein Submit
    $allgSubmit.click(function(){
        event.preventDefault();
        var gehrKundennummer = $('#gehrKundennummer').val();
        var kundenklasse = $("input[type='radio'][name='kundenklasse']:checked").val();
        var lkw12t = $('#lkw12t').val();
        var lkw3t = $('#lkw3t').val();
        var autobus = $('#autobus').val();
        var firmenname1 = $('#firmenname1').val();
        var firmenname2 = $('#firmenname2').val();
        var uidnummer = $('#uidnummer').val();
        var peselregon = $('#peselregon').val();
        var firmenart = $('#firmenart option:selected').val();
        var strasse = $('#strasse').val();
        var ort = $('#ort').val();
        var plz = $('#plz').val();
        var land = $('#land').val();
        var fd = new FormData();
        var file = fd.append('file', $('#allg_firmen_dok').get(0).files[0]);

        var allgArray = { 
            'gehrKundennummer':gehrKundennummer, 
            'kundenklasse':kundenklasse,
            'lkw12t':lkw12t,
            'lkw3t':lkw3t,
            'autobus':autobus,
            'firmenname1':firmenname1,
            'firmenname2':firmenname2,
            'uidnummer':uidnummer,
            'peselregon':peselregon,
            'firmenart':firmenart,
            'strasse':strasse,
            'ort':ort,
            'plz':plz,
            'land':land,
            'file':file
        };

        //var data = new FormData();
        //jQuery.each(jQuery('#allg_firmen_dok')[0].files, function(i, file) {
          // data.append('file-'+i, file);
        //});

        console.log(allgArray);
        $.ajax({
            url: "PATHTOFILE/logic/logic_update_client_allg.php",
            type: "POST",
            data: allgArray,
            processData: false,  // tell jQuery not to process the data
            contentType: false,
            success: function(allgArray){
                alert(allgArray);
                var allgSave = $('#allgSave');
                allgSave.text('Aktualisieren erfolgreich!');
                allgSave.toggle();
            },
            error: function(){
                var allgSave = $('#allgSave');
                allgSave.text('Aktualisieren fehlgeschlagen!');
                allgSave.toggle();
            }
        });
    });

The console log of the array returns all values correctly except the one for "file" it says undefined.

I don't know how to deal with it, are there any requirements that im missing?

Thanks for any kind of help

EDIT

var file = fd.append('file', $('#allg_firmen_dok').get(0).files[0]);

returns undefined

Answer 1

I think the variable fd = new FormData() is an Object and it has attribute "file". So it cannot pass the attribute "file" to another Object "allgArray" You need to check about it before you call function

 $.ajax({
        url: "PATHTOFILE/logic/logic_update_client_allg.php",
        type: "POST",
        data: allgArray,

Think about the data you send! It maybe another instance to get data from "file" of "fd". Hope it help you! ^^ Btw, I used AJAX to send file last time

$(document).ready(function (e) {
$("#Form").on('submit',(function(e) {
    e.preventDefault();
    $.ajax({
        url: "uploader.php", // Url to which the request is send
        type: "POST",             // Type of request to be send, called as method
        data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
        contentType: false,       // The content type used when sending data to the server.
        cache: false,             // To unable request pages to be cached
        processData:false,        // To send DOMDocument or non processed data file it is set to false
        success: function(data)   // A function to be called if request succeeds
        {
             console.log(data);
        }
    });
}));

});

Answer 2

在ajax选项中添加headers: { "Content-Type": "multipart/form-data" }