Jquery/Ajax Form Submission (enctype="multipart/form-data" ). Why does 'contentType:False' cause undefined index in PHP?

contentType option to false is used for multipart/form-data forms that pass files.

When one sets the contentType option to false, it forces jQuery not to add a Content-Type header, otherwise, the boundary string will be missing from it. Also, when submitting files via multipart/form-data, one must leave the processData flag set to false, otherwise, jQuery will try to convert your FormData into a string, which will fail.

Use jQuery's .serialize() method which creates a text string in standard URL-encoded notation.

You need to pass un-encoded data when using contentType: false.

Try using new FormData instead of .serialize():

  var formData = new FormData($(this)[0]);

See for yourself the difference of how your formData is passed to your php page by using console.log().

  var formData = new FormData($(this)[0]);  console.log(formData);  var formDataSerialized = $(this).serialize();  console.log(formDataSerialized);

Please set your form action attribute as below it will solve your problem.

<form name="addProductForm" id="addProductForm" action="javascript:;" enctype="multipart/form-data" method="post" accept-charset="utf-8">

jQuery code:

$(document).ready(function () {    $("#addProductForm").submit(function (event) {        //disable the default form submission        event.preventDefault();        //grab all form data          var formData = $(this).serialize();        $.ajax({            url: 'addProduct.php',            type: 'POST',            data: formData,            async: false,            cache: false,            contentType: false,            processData: false,            success: function () {                alert('Form Submitted!');            },            error: function(){                alert("error in ajax form submission");            }        });        return false;    });});