How submit or insert data and files using JQuery Ajax ?

Step : 1 create Index.php file
----------------------------------------
<form id="data" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>FirstName</td>
<td><input type="text" name="firstName" value="" /></td>
</tr>
<tr>
<td>LastName</td>
<td><input type="text" name="lastName" value="" /></td>
</tr>
<tr>
<td>Attachment</td>
<td><input name="image" type="file" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Submit" /></td>
</tr>
</table>
</form>
<div id="response"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$("form#data").submit(function(){
    var formData = new FormData($(this)[0]);
    $.ajax({
        url: "data.php",
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            //alert(data)
    $("#response").html(data);
        },
        cache: false,
        contentType: false,
        processData: false
    });
    return false;
});
</script>

Step : 2 create data.php file
----------------------------------------
<?php
echo "<pre>";
print_r($_FILES);
echo "<pre>";
print_r($_POST );
/// Put here your logic for insert and uploading code.
?>