Ajax不会将数据传递给我的控制器

I've been working on this for hours. I have a basic form that submits the data and feature image for a store i'm building.

I'm sending data from view to controller using ajax, but the $_POST array is always empty in the controller.

view:

<form method="POST" id="newproducts" enctype="multipart/form-data">
<div class="form-group">
    <label class="control-label">Product Name</label>
    <input type="text" name="product" class="form-control" placeholder="Enter product name">                                
</div>
<div class="form-group">
    <label class="control-label">Prodct Category</label>
    <select name="category" class="form-control" id="mycat">
        <option value=""></option>
        <option value="1">Dummy Category 1</option>
        <option value="2">Dummy Category 2</option>
    </select>
</div>
<div class="form-group">
    <label class="control-label">Available Stock</label>
    <input type="number" name="stock" class="form-control" placeholder="Number of Available units">
</div>
<div class="form-group">
    <label class="control-label">Product Price</label>
    <input type="number" class="form-control" name="price" placeholder="Price without the (R)">
</div>
<div class="form-group">
    <label class="control-label">Product Description</label>
    <textarea name="description" placeholder="Enter Prodct Description" class="form-control"></textarea>
</div>
<div class="form-group">
    <label class="control-label">Feature Image</label>
    <input type="file" name="feature" id="feature">
    <div class="error"></div>
    <div class="clearfix"></div>
    <p>&nbsp;</p>
    <div id="preview"></div>
</div>
<div class="form-group">
    <button type="submit" class="btn btn-success" name="add">Add Product</button>
</div>
<div class="form-group">
    <input type="image" src="view/assets/images/ajax-loader.gif" style="display: none;" name="loader">
</div>

product.js

I have left out the validation just to show only the relevant code

var formData = new FormData($('#newproducts')[0]);

            $.ajax({
                type : "POST",
                url  : "controller/products.php",
                // data : {product :product, category:category,stock:stock,price:price,description:description,feature:feature},
                data :  formData,
                cache : false,
                contentType: true,
                processData:false,
                async : false,
                traditional: true,
                beforeSend : function(){

                    $('button[type="submit"][name="add"]').html("Please Wait...");
                    $('input[type="image"][name="loader"]').css('display','block');
                },
                success : function(results){
                    $('button[type="submit"][name="add"]').html("Add Product");
                    $('input[type="image"][name="loader"]').css('display','none');

                    if(results == "ok"){
                        $('#results').removeClass('error');
                        $('#results').addClass('success');
                        $('#results').html('Product added successfully...');
                    }else{

                        $('#results').removeClass('success');
                        $('#results').addClass('error');
                        $('#results').html(results);
                    }
                }
            });
        return false;   
    }

When I sent data like this : data : {product :product, category:category,stock:stock,price:price,description:description,feature:feature}, everything works fine, but the only challenge I have with that is sending the image data for upload.

my controller :

I have just done a simple var_dump to see if does it gets data

var_dump($_POST)

gives :

array(0) { }

Try changing this part of you ajax, with these settings, I got it to work. Using this post and one of my own I did a while back for reference, it is where I looked for a "refresher" on FormData.

Here are the parts I changed:

// Pass event, use this instead of false at the end,
// this is just how I stop the default action, it's optional
e.preventDefault();
// Set the form into the formdata
var formData    =   new FormData($("#newproducts")[0]);    
// Append the file to the formdata
formData.append('file',$( '#feature' )[0].files[0]);
// Send normally
$.ajax({
    // Same
    type : "POST",
    url  : "controller/products.php",
    data :  formData,
    processData: false,
    contentType: false,
    // I removed "traditional", but I don't know if it still works with it,
    // I never tried it. Everything after is the same...

Check the size limit of your php.ini, and try with a higher size than your (like 20MB):

; Maximum allowed size for uploaded files.
upload_max_filesize = 20M

; Must be greater than or equal to upload_max_filesize
post_max_size = 20M

I have got the same problem some years ago. When POST, GET and FILES are empties, the problem is always the size of the input, so if you try to increase the limit, your upload should work fine. You can also try to upload a smaller file than your actual config.