ajax contenttype multipart formdata,Jquery/Ajax Form Submission (enctype="multipart/form-data" ). Wh...

I have been trying to submit a form with enctype="multipart/form-data". I have this setting because the form will involve jpeg/png uploads once I have figured out the ajax submission for text inputs.

the php works fine when referencing the script using action within the form html.

the form data seems to be retrieved correctly by the below jquery because the alert line shows: productName=Test+Name&productDescription=Test+Description&OtherProductDetails=

the returned data printed to my HTML by the jquery success function is a php error saying:Undefined index: productName

removing contentType:false fixes the problem.

When i google jquery/ajax multipart/form-data submission, the top hits at least mainly include 'contentType:false'. Please could someone explain the reason to me?

The jquery API documentation says:

contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8')

Type: String

When sending data to the server, use this content type.

Why would we need to set it to false for a multipart/form-data submission?

When would the false setting be needed at all?

Jquery:

$("#addProductForm").submit(function (event) {

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 (returndata) {

$("#productFormOutput").html(returndata);

alert(formData);

},

error: function () {

alert("error in ajax form submission");

}

});

return false;

});