FormData append not working
<p>I wrote this to upload an image to my local Apache webserver using <code>input</code> element in HTML. The <code>file</code> is logged as not empty, but why is the <code>form_data</code> completely empty?</p>

<pre><code>$('#upload-image').change(function(e){
    var file = e.target.files[0];
    var imageType = /image.*/;
    if (!file.type.match(imageType))
        return;
    console.log(file);
    var form_data = new FormData();
    form_data.append('file', file);
    console.log(form_data);
    $.ajax({
        url: 'http://localhost/upload.php',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'POST',
        success: function(response){
            console.log(response);
        },
        error: function(error){
            console.log(error);
        }
    });

});
</code></pre>

<p>This is my <code>upload.php</code> on local webserver</p>

<pre><code>&lt;?php
    header('Access-Control-Allow-Origin: *');
    if ( 0 &lt; $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '&lt;br&gt;';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
        $target_path = $_SERVER['DOCUMENT_ROOT'] . "/uploads/" . $_FILES['file']['name'];
        echo $target_path;
    }
?&gt;
</code></pre>

<p>The <code>console.log(response)</code> logs all the code lines of PHP file, instead of the returned result of <code>echo</code></p>