javascript - Image not getting posted with ajax(without submitting the form)

Question

My form is -

<form id="fileupload" method="post" enctype="multipart/form-data">
     <input type="file" id="headerimage" spellcheck="true" class="typography" name="headerimage">
</form>

My ajax code is -

var fileData = new FormData($('#fileupload'));
            fileData.append('imagefile', $('#headerimage')[0].files);
            $.ajax({
                    type    : 'post',
                    data    : fileData,
                    url     : 'UploadImage.php',
                    dataType: 'json',
                    processData: false,
                    success : function(data)
                    {
                        alert("done");
                    },
                });

Php code -

<?php
    # Data Base Connection
    require_once('conn/dbConn.php');
    var_dump($_REQUEST);
    if (!empty($_FILES)) {
        var_dump($_FILES);
    }

Please Help. On the php page i am not getting file data.

Answer 1

HTML CODE:

<form id="fileupload" method="post" enctype="multipart/form-data">
<input name="userImage" id="uploadForm" type="file" class="inputFile" />
</form>

AJAX :

<script type="text/javascript">
$(document).ready(function (e){
$("#fileupload").on('submit',(function(e){
e.preventDefault();
$.ajax({
url: "UploadImage.php",
type: "POST",
data:  new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data){
$("#targetLayer").html(data);
},
error: function(){}             
});
}));
});
</script>