带有FormData的jQuery ajax POST不发送任何值

Question

There seem to be lots of posts about this, but can't find a solution amongst them and I've hit a brick wall. Help, dear Stackers!

I'm writing a bit of code that lets users choose a profile picture, crop it and then save the cropped image on the server. I'm using the Cropper.js library to handle the actual cropping and have established that's working because I can display the crop live with this code:

var imageData = cropper.getCroppedCanvas().toDataURL();
var profileimage = document.getElementById('myProfilePhoto');
profileimage.src = imageData;

Now I want to send the cropped image to the server, and the best method would appear to be create a blob and Ajax that over to a php script to handle it.

cropper.getCroppedCanvas().toBlob(function (blob) {
    var formData = new FormData();
    formData.append('file', blob);
    formData.append('uuid', '{a unique identifier}');
    $.ajax({
         type:           'POST',
         url:            '{the php script}',
         data:           formData,
         processData:    false,
         contentType:    false,
         success: function (response) {
             console.log('Upload success: '+response);
         },
         error: function () {
             console.log('Upload error');
         }
    });
});

And at this stage I'm just getting my php script to var_dump($_REQUEST) so I can see in the console what the script thinks it's getting. However, the response is just sending back the default $_REQUEST objects like PHPSESSID and no file or uuid input.

What am I doing wrong?

Thanks in advance for any pointers.

Answer 1

If you are sending via post in order to see the request put this code

 var formData = new FormData();
formData.append('file', blob);
formData.append('uuid', '{a unique identifier}');
formData.append('_method', 'PATCH'); <---add this and you're good to go

Answer 2

So the answer was annoyingly simple but frustratingly hard to find.

My server had an .htaccess rewrite rule which automatically changed www. addresses to the non-www version, and obviously I'd been dumb enough to include the www. in the URL I was calling, and it seems that's enough to strip off the $_POST data in these circumstances.

So FormData() and blobs are all red herrings here - it's just a redirect that's the cause.