jQuery POST data using FormData with PHP

Question

I'm trying to post data using ajax, jquery, formdata and then process it using php i'm not able to see where is the error to process it in my PHP file. The final result is an empty array.

HTML CODE

<form action="ajax.php?action=upload" method="POST" name="submit_upload_album" id="submit_upload_album" enctype="multipart/form-data">
    <input type="hidden" id="input1" name="input1" value="input1">
    <input type="hidden" id="input2" name="input2" value="input2">
    <input type="hidden" id="input3" name="input3" value="input3">
    <input type="hidden" id="input4" name="input4" value="false">
    <input type="hidden" id="input5" name="input5">
    <input type="hidden" id="input6" name="input6" value="auto">
    <input id="title" name="title" class="form-control" type="text" maxlength="70" required/>
    <textarea id="description" class="form-control" name="description" rows="4" style="resize: vertical;"></textarea>
    <input id="file1" type="file" name="fileupload[]" accept="video/*" required/>
    <input id="file2" type="file" name="fileupload[]" accept="audio/*" required/>
    <input id="file3" type="file" name="fileupload[]" accept="video/*" required/>
</form>

JS code

<script type="text/javascript">
    $(document).ready(function(e){
        // Submit form data via Ajax
        $("#submit_upload_album").on('submit', function(e){
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: "ajax.php?action=upload",
                data: new FormData(this),
                async: true,
                beforeSend: function(){
                    /*$('input[type=submit]').attr("disabled","disabled");*/
                },
                success: function(response){
                    $('#answer').html(response);
                },
                contentType: false,
                cache: false,
                processData:false
            });
        });
    });
</script>

PHP Code

<?php
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST');
    header("Access-Control-Allow-Headers: X-Requested-With");
    echo '<pre>';
    var_dump($_FILES);
    echo '<br>';
    var_dump($_POST);
    echo '</pre>';
?>

Result

array(0) {}

array(0) {}

Answer 1

$(this) is not accessible in ajax request you should modify your code as follows:

$("#submit_upload_album").on('submit', function(e){
            e.preventDefault();
            let formData = $(this).serialize();
            $.ajax({
                type: 'POST',
                url: "ajax.php?action=upload",
                data: new FormData(formData),
                async: true,
                beforeSend: function(){
                    /*$('input[type=submit]').attr("disabled","disabled");*/
                },
                success: function(response){
                    $('#answer').html(response);
                },
                contentType: false,
                cache: false,
                processData:false
            });
        });

Hopefully this is helpful for you

Answer 2

After checking the PHP configuration the problem was coming from

post_max_size and upload_max_filesize

they were limited on 2M so it was blocking all other posted parameters.