how to combine data serialize() and new formData with each other in jquery

Question

for a form with only text fileds, i use this js:

$.ajax({
    type: "POST",
    url: 'order.php',
    data: $('#order').serialize(), 
    success: function(data){
            $('.alert-success').html(data); 
    }
});

For another form for a file upload only, i have this js:

var file_name = $('.image').val();
var index_dot = file_name.lastIndexOf(".")+1;
var ext = file_name.substr(index_dot);

var formData = new FormData();          
formData.append('fileupload',$( '.image' )[0].files[0], file_name);

$.ajax({
    url: 'order.php',
    data: formData,
    processData: false,
    contentType: false,
    type: 'POST',
    success: function(data){
        $(".alert-success").show(); 
        $('.alert-success').html(data);

    }
});

Now i want to combine the 2 data: data: $('#order').serialize(), and data: formData, to each other so that i have only 1 ajax

How can i do that? (i have already put the input type="file" into the first form)

Answer 1

var file_name = $('.image').val();
var index_dot = file_name.lastIndexOf(".")+1;
var ext = file_name.substr(index_dot);

var formData = new FormData(this);          
formData.append('fileupload',$( '.image' )[0].files[0], file_name);

$.ajax({
    url: 'order.php',
    data: formData,
    ...

Note: var formData = new FormData(this); instead of var formData = new FormData();