使用Ajax发送表单数据时PHP不会获得$ _FILES

Question

I'm trying to create an upload element on my website. What I'm trying to do is an upload button that instantly when the user picks a file from the computer it uploads it to the server.

This is my form:

<form id="createAlert" name="createAlert" enctype="multipart/form-data" method="POST" action="createAlert.php">
    <input name="title" type="text" class="input-medium" maxlength="36"></input>

    <textarea name="content" rows="7" cols="90" class="input-short" style="font-family: arial; width: 80%; resize: none; height: 250px"></textarea>

    <input name="push" type="checkbox"></input>

    <input enctype="multipart/form-data" name="img" id="img" size="35" type="file"/>

    <input class="submit-gray" type="submit" value="POST ALERT"/>
</form>

Here is my Javascript code that sends the file as a FormData object to an upload page (upload.php):

    $('#img').live('change', function() {
        var formData = new FormData();
        formData.append('file', $('#img')[0].files[0]);
        $.ajax({
            url : 'upload.php',
            type : 'POST',
            data : formData,
            enctype: 'multipart/form-data',
            success : function(data) {
                console.log(data);
                alert(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });

So far, so good - everything works fine. The problem is with the upload.php file that receives the FormData. Here is it's code (It's only a testing version it doesn't upload the file yet):

<?php
print file_get_contents('php://input');
var_dump($_FILES);
var_dump($_POST);

The problem is that the output of var_dump($_FILES); and var_dump($_POST) is two empty arrays, while in the file_get_contents('php://input') I get the file data.

Here is the output (I cut out the part with the content of the uploaded file...):

------WebKitFormBoundaryw4nmFcISqYuAWQOS
Content-Disposition: form-data; name="file"; filename="Sem Título-1.png"
Content-Type: image/png

//Here is the file I uploaded...

------WebKitFormBoundaryw4nmFcISqYuAWQOS--
array(0) {
}
array(0) {
}

I read dozens of answers to questions here and many solutions to the problem I have but none of them solved the problem.

What am I doing wrong? Why am I receiving the file just in the php://input but not using $_FILES?

Thank you!

Answer 1

I would suggest you update the version of jQuery that you're using. live() was deprecated and removed from the source over 5 years ago now, and there have been several changes to the way data is serialised and encoded within $.ajax().

It's possible the old version you're using doesn't have these updates and is not adding the FormData to the request in the correct manner.