If you're looking for a simpler and quicker option, here's an alternative approach you can take!

var formData = new FormData();

var fileData = object.get(0).files[i];
var otherData = $('form').serialize(); //page_id=&category_id=15&method=upload&required%5Bcategory_id%5D=Category+ID

formData.append("file", fileData);

$.ajax({
    url: 'add.php?' + otherData,   //<== just add it to the end of url ***
    data: formData,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(response){
        alert(response);
    }
});

I always utilize this method for sending form data via ajax

$(document).on("submit", "form", function(event)
{
    event.preventDefault();

    var url=$(this).attr("action");
    $.ajax({
        url: url,
        type: 'POST',            
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        }
    });
});

Collaborating with my friend on code contributions, I made modifications based on discussions from a forum.

$('#upload').on('click', function() {
            var fd = new FormData();
              var c=0;
              var file_data,arr;
              $('input[type="file"]').each(function(){
                  file_data = $('input[type="file"]')[c].files; // get multiple files from input file
                  console.log(file_data);
               for(var i = 0;i<file_data.length;i++){
                   fd.append('arr[]', file_data[i]); // we can put more than 1 image file
               }
              c++;
           }); 

               $.ajax({
                   url: 'test.php',
                   data: fd,
                   contentType: false,
                   processData: false,
                   type: 'POST',
                   success: function(data){
                       console.log(data);
                   }
               });
           });

This is my HTML file:

<form name="form" id="form" method="post" enctype="multipart/form-data">
<input type="file" name="file[]"multiple>
<input type="button" name="submit" value="upload" id="upload">

And this is my PHP code file:

<?php 
$count = count($_FILES['arr']['name']); // arr from fd.append('arr[]')
var_dump($count);
echo $count;
var_dump($_FILES['arr']);

if ( $count == 0 ) {
   echo 'Error: ' . $_FILES['arr']['error'][0] . '<br>';
}
else {
    $i = 0;
    for ($i = 0; $i < $count; $i++) { 
        move_uploaded_file($_FILES['arr']['tmp_name'][$i], 'uploads/' . $_FILES['arr']['name'][$i]);
    }

}
?>

I hope that by sharing this solution, others facing the same issue can quickly resolve their problems. Dealing with multiple image uploads was giving me a headache.

It seems like you want to send both images and input values together. This code has worked successfully for me, and I hope it comes in handy for someone else in the future.

<form id="my-form" 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>

-

jQuery.ajax({
url: 'post.php',
data: new FormData($('#my-form')[0]),
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
    console.log(data);
}});

Check out my simple code for AJAX multiple upload with preview.

Give this code a shot:

let formData = new FormData();
let dataArray = [];       //<---------------initialize array at the beginning
let fileObj = object.get(0).files[index];
let otherInfo = $('form').serialize();

dataArray.push(fileObj);    //<----------------add file data here
dataArray.push(otherInfo);   //<----------------add form data here

formData.append("file", dataArray);  //<---------finally append all data to FormData object

Here is a solution for multiple file input:

<form name="form" id="form" method="post" enctype="multipart/form-data">
    <input type="file" name="file[]">
    <input type="file" name="file[]" >
    <input type="text" name="name" id="name">
    <input type="text" name="name1" id="name1">
    <input type="button" name="submit" value="upload" id="upload">
</form>


$('#upload').on('click', function() {
  var fd = new FormData();
    var c=0;
    var file_data;
    $('input[type="file"]').each(function(){
        file_data = $('input[type="file"]')[c].files; // for multiple files

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

When dealing with multiple files in an ajax scenario, you can follow this approach:

var url = "your_api_endpoint";
var data = $('#my_form').serialize();
var form_data = new FormData(); 
// determine the number of file inputs   
var count = $('input[type="file"]').length; 

for(var i = 0; i < count; i++){
    var fileData = $('input[type="file"]')[i].files;

    form_data.append("file_"+i, fileData[0]);
}

// add other form data
form_data.append("data", data);

$.ajax({
    url: url,
    type: "POST",
    data: form_data,
    cache: false,
    contentType: false, // important
    processData: false, // important
    success: function (response) {
        // perform actions based on response
    }
});

If using PHP as the backend language, the handling would be like this:

parse_str($_POST['data'], $_POST); 
for($i=0; $i < count($_FILES); $i++){
    if(isset($_FILES['file_'.$i])){
        $file = $_FILES['file_'.$i];
        $file_name = $file['name'];
        $file_type = $file['type'];
        $file_size = $file['size'];
        $file_tmp_path = $file['tmp_name'];
    }
}

 var fd = new FormData();
    //Extract Form Data
    var form_data = $('#form1').serializeArray();
    $.each(form_data, function (key, input) {
     fd.append(input.name, input.value);
     });

     //Extract File Data
      var $file = jq("#photoUpload").get(0);
      if ($file.files.length > 0) {
      for (var i = 0; i < $file.files.length; i++) {
      fd.append('Photo' + i, $file.files[i]);
       }
     }
$.ajax({
    url: 'test.php',
    data: fd,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        console.log(data);
    }
});

After encountering a situation where my ModelState was false on the server causing old values to be posted again, I came up with a solution.

var formData = new FormData();
$.each($form.serializeArray(), function (index, input) {
    if (formData.has(input.name)) {
        formData.set(input.name, input.value);
    } else {
        formData.append(input.name, input.value);
    }
});

After much deliberation, I managed to tackle my issue with the following approach:

var formData1 = new FormData(document.getElementById('Form1'));  // Data from Form 1
var formData2 = $('#Form2').serializeArray();  // Data from Form 2

// Merging data from Form 2 into Form 1
$.each(formData2, function (key, input) {
    if (formData1.has(input.name)) {
        formData1.set(input.name, input.value);
    } else {
        formData1.append(input.name, input.value);
    }
});

// File data output
console.log(formData1);

I implemented this logic for image uploading using AJAX. In my scenario, Form 1 had multiple images while Form 2 contained basic user inputs spanning over 30 fields. I am confident that this solution will prove useful to you. Happy Coding :)