submit both data and file(image) using jquery ajax - php

Question

I want to create a submit form to enter MySQL db data and image. I want to make do this using same form through jquery ajax. I tried my best with following code. I couldn't be success. When I enter id I want auto fill email and name field auto. I did it through ajax successfully. I couldn't submit both file and data through ajax.
<?php
print_r($_POST);
print_r($_FILES);
?>
<form class="form-horizontal" action="postvaccode2.php" method="post" id="data" enctype="multipart/form-data">
<fieldset>
<!-- Form Name -->
<legend>Post Vacancy</legend>
<!-- Select Basic -->
<div class="form-group">
<div class="col-md-5">
<select id="cato" name="cato" class="form-control" id="cato">
<option value="IT">IT</option>
<option value="Finance">Finance</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="col-md-6">
<input id="comid" name="comid" type="text" placeholder="comid" class="form-control input-md" required="" >
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="col-md-6">
<input id="loc" name="loc" type="text" placeholder="city or town" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="col-md-8">
<input id="qul" name="qul" type="text" placeholder="qulification" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="col-md-8">
<input id="indate" name="indate" type="date" placeholder="indate" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="col-md-4">
<input id="expdate" name="expdate" type="date" placeholder="expdate" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<input id="gpa" name="gpa" type="text" placeholder="gpa" class="form-control input-md">
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<input id="des" name="des" type="text" placeholder="description" class="form-control input-md">
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<input id="title" name="title" type="text" placeholder="title" class="form-control input-md">
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<input id="comname" name="comname" type="text" placeholder="name" class="form-control input-md">
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<input id="email" name="email" type="text" placeholder="email" class="form-control input-md">
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<input id="image" name="image" type="file" class="form-control input-md">
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<input id="vacpost" name="vacpost" type="button" class="form-control input-md">
</div>
</div>
</fieldset>
</form>
<script>
$('#comid').on('input',function(e){
$.ajax({
type: "POST",
url: "postvaccode.php",
data: {id:$('#comid').val()},
success: function (response) {
var partsOfStr = response.split(',');
$('#comname').val(partsOfStr[0]);
$('#email').val(partsOfStr[1]);
}
});
});
</script>
<script>
$("form#data").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: "postvaccode3.php",
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
</script>
postvaccode3.php
<?php
include('dbconnection.php');
if(isset($_POST['comid'])) {
$comid = $_POST['comid'];
$cato = $_POST['cato'];
$loc = $_POST['loc'];
$qul = $_POST['qul'];
$indate = $_POST['indate'];
$expdate = $_POST['expdate'];
$gpa = $_POST['gpa'];
$des = $_POST['des'];
$title = $_POST['title'];
$comname = $_POST['comname'];
$email=$_POST['email'];
$sql="insert into vacancy(companyid,catogary,location,qulification,indate,expectgpa,description,title,expdate,company_name,email,image) values($comid,'$cato','$loc','$qul','$indate','$gpa','$des','$title','$expdate','$comname','$email')";
if(mysqli_query($conn,$sql)){
echo "great";
}
else{
echo "not great";
}
}
?>