Error in AjaX file upload: uploaded file is null - php

Question

I'm trying to upload a file via Ajax.
var fd = new FormData();
fd.append('file', file);
var xhr = $.ajax({
url: 'https://www.mywebsite.com/it/file/upload/',
type: 'POST',
dataType: 'json',
data: fd,
cache: false,
contentType: "application/json; charset=utf-8"
processData: false,
success: function(result, message, xhr)
{
console.log(result);
}
});
For the moment, the upload PHP script simply displays file data
header('Content-Type: application/json');
echo json_encode($_FILES['file']);
die();
As stated here, I am forced to use contentType:"application/json; charset=utf-8" because contentType:false causes a 404 (Not Found) error.
Unfortunately, this solution avoids the 404 error, but the displayed file data is null.

Answer 1

You should use this. It is working for me.
$.ajax({
type: 'POST',
url: $(this).attr('action'), //url_to_php_script
data: new FormData(this),
contentType: false,
processData: false,
success: function (data) {
//do necessary cleanups on success
},
error: function (e) {
//do necessary cleanups on failue
}
});
You will be able to get uploaded image in PHP using $_FILES

Answer 2

It should be ok the way you're doing it, however...
If you set contentType to false, than you will force jquery not to set the content type for you. If it is not set, it will default to `application/x-www-form-urlencoded; charset=UTF-8'.
That means you are sending your data using an url encoded string.
You can't easily send a file in an url encoded string.
Most likely the method on the server side is set up to read the form parameters from the url. Therefor if you set `contentType' to false, the server won't recognise the url, resulting in a 404.
Try setting up the server method to accept post data, remove the url parameters and read the posted form from the $_POST and $_FILES variables.
If you can't figure it out, update the question with the servers' method so we can see how the method is set up.