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?
http://digipiph.com/blog/submitting-multipartform-data-using-jquery-and-ajax
http://hayageek.com/jquery-ajax-form-submit/
Sending multipart/formdata with jQuery.ajax
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;
});
Best Answer
contentType
option tofalse
is used formultipart/form-data
forms that pass files.When one sets the
contentType
option tofalse
, 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 theprocessData
flag set to false, otherwise, jQuery will try to convert your FormData into a string, which will fail.To try and fix your issue:
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():
See for yourself the difference of how your formData is passed to your php page by using
console.log()
.