Ajax POST request via jQuery and FormData - $_POST empty on PHP Ajax POST request via jQuery and FormData - $_POST empty on PHP ajax ajax

Ajax POST request via jQuery and FormData - $_POST empty on PHP


The FormData() constructor isn't a selector engine and it doesn't represent an Array-like collection, so var formData is likely equal to undefined.

To use it, you'll have to find the <form> first and pass it to the constructor:

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

If the <input type="file"> is within the <form>, it should already be included in formData. But, if it isn't, you can also .append() it:

var inputLogo = $("#InputLogo")[0];formData.append(inputLogo.name, inputLogo.files[0]);

And, set formData as the data being sent, telling jQuery not to assume a contentType for it:

// ...    data : formData,    contentType : false,    processData : false,// ...

Then, the fileSize should be available in PHP's $_FILES collection:

$fileName = $_FILES['inputLogo']['name'];


I know this is an old post, but I came across it when trying to solve an analogous problem for myself, and none of the replies pointed this issue out, so I am posting a reply in case someone else finds him/herself in the same situation.

It turns out that, as documented in another StackOverflow post:

Does form data still transfer if the input tag has no name?

if you do not have a non-empty name attribute for your file input element, no data from that element will be sent in a request.

So your input element:

<input type="file" id="InputLogo" accept="image/*">

Should be:

<input type="file" id="InputLogo" accept="image/*" name="yourfieldnamehere">

or the file will not be sent with the form data.


I too tried a lot with the following ways:

var formData = new FormData("form")[0];var formData = new FormData("form");var formData = new FormData($('form-id'));var formData = new FormData(this);

None of them worked for me.But at last, I used a javascript way of getting elementById, and it worked perfectly.

formdata = new FormData(document.getElementById('form_id'))

Usually in request headers you will find an encrypted text like the one given below: multipart/form-data; boundary=----WebKitFormBoundaryUuVvGDydAdTf3Bmp

And when you try to alert the form data it will show [object formdata]. This means that the formdata function is working fine.

When you return the values of $_POST, $_REQUEST or $_FILES, and if it is blank, it would mean that formdata is not able to access the form element provided. So first you have to confirm that formdata is able to access the form element or not, and then try other possibilities.