Send FormData and String Data Together Through JQuery AJAX?

Question

How can I post file and input string data with FormData()? For instance, I have many other hidden input data that I need them to be sent to the server,

html,

<form action="image.php" method="post" enctype="multipart/form-data"> <input type="file" name="file[]" multiple="" /> <input type="hidden" name="page_id" value="<?php echo $page_id;?>"/> <input type="hidden" name="category_id" value="<?php echo $item_category->category_id;?>"/> <input type="hidden" name="method" value="upload"/> <input type="hidden" name="required[category_id]" value="Category ID"/> </form> 

With this code below I only manage to send the file data but not the hidden input data.

jquery,

// HTML5 form data object. var fd = new FormData();  var file_data = object.get(0).files[i]; var other_data = $('form').serialize(); // page_id=&category_id=15&method=upload&required%5Bcategory_id%5D=Category+ID  fd.append("file", file_data);  $.ajax({     url: 'add.php',     data: fd,     contentType: false,     processData: false,     type: 'POST',     success: function(data){         alert(data);     } }); 

server.php

print_r($_FILES); print_r($_POST); 

result,

Array (     [file] => Array         (             [name] => xxx.doc             [type] => application/msword             [tmp_name] => C:\wamp\tmp\php7C24.tmp             [error] => 0             [size] => 11776         )  ) 

I would like to get this as my result though,

Array (     [file] => Array         (             [name] => xxx.doc             [type] => application/msword             [tmp_name] => C:\wamp\tmp\php7C24.tmp             [error] => 0             [size] => 11776         )  )  Array (     [page_id] => 1000     [category_id] => 12     [method] => upload     ... ) 

Is it possible?

Answer 1

var fd = new FormData(); var file_data = $('input[type="file"]')[0].files; // for multiple files for(var i = 0;i<file_data.length;i++){     fd.append("file_"+i, file_data[i]); } var other_data = $('form').serializeArray(); $.each(other_data,function(key,input){     fd.append(input.name,input.value); }); $.ajax({     url: 'test.php',     data: fd,     contentType: false,     processData: false,     type: 'POST',     success: function(data){         console.log(data);     } }); 

Added a for loop and changed .serialize() to .serializeArray() for object reference in a .each() to append to the FormData.