I wrote this to upload an image to my local Apache webserver using input element in HTML. The file is logged as not empty, but why is the form_data completely empty?

$('#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);

        }

    });



});

This is my upload.php on local webserver

<?php

    header('Access-Control-Allow-Origin: *');

    if ( 0 < $_FILES['file']['error'] ) {

        echo 'Error: ' . $_FILES['file']['error'] . '<br>';

    }

    else {

        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);

        $target_path = $_SERVER['DOCUMENT_ROOT'] . /uploads/ . $_FILES['file']['name'];

        echo $target_path;

    }

?>

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