Add image upload in ajax in WP

php file
 <form id='edit_register' action='' method='post' enctype='multipart/form-data' />
<div class="form-row">
                <label>Upload Profile picture:</label>
                <span>
<div id="image_preview"><img id="previewing" height="250" width="230" src="<?php if($events->picture==""){ echo site_url();?>/wp-content/themes/snappysitter/images/noimage.png" <?php } else { echo site_url();?>/wp-content/themes/snappysitter/images/profile/<?php echo $events->picture; ?>" <?php }?> /></div>
                <input type="file" name="file" id="file"  />
                </span> </div>
</form>
  <script>
$(document).ready(function (e) {
// Function to preview image after validation
$(function() {
$("#file").change(function() {
$("#message").empty(); // To remove the previous error message
var file = this.files[0];
var imagefile = file.type;
var match= ["image/jpeg","image/png","image/jpg"];
if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
{
$('#previewing').attr('src','noimage.png');
$("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
return false;
}
else
{
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
var action=jQuery("#action").val();
//var file = jQuery('input[type=file]').val();
var file = this.files[0];
var file1 = $('#edit_register').serialize();
//alert(this.files[0]);
//var file  = file[0];
file1= 'file='+this.files[0]+'&action='+action;  // $('#edit_register').serialize();'file='+file+'&action='+action;
$("#edit_register").ajaxSubmit({
url: '<?php echo  get_site_url(); ?>/wp-content/themes/snappysitter/action.php', // Url to which the request is send
type: 'POST',
        dataType: 'json',
        success: function(data, statusText, xhr, wrapper){
            //$('#previewing').prop("src","/tmp/"+data);
            //update relevent product form fields here
//alert(data);
        }
});
}
});
});
function imageIsLoaded(e) {
$("#file").css("color","green");
$('#image_preview').css("display", "block");
$('#previewing').attr('src', e.target.result);
$('#previewing').attr('width', '250px');
$('#previewing').attr('height', '230px');
};
});

</script>

action.php

if ($_FILES["file"]["name"]){
 
$validextensions = array('jpeg', 'jpg', 'png');
 $temporary = explode('.',$_FILES['file']['name']);
$file_extension = end($temporary);
if ((($_FILES['file']['type'] == 'image/png') || ($_FILES['file']['type'] == 'image/jpg') || ($_FILES['file']['type'] == 'image/jpeg')
) && ($_FILES['file']['size'] < 10000000)//Approx. 100kb files can be uploaded.
&& in_array($file_extension, $validextensions)) {
if ($_FILES['file']['error'] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>";
}
else
{
if (file_exists('images/profile/' . $_FILES['file']['name'])) {
echo $_FILES['file']['name'] . ' <span id="invalid"><b>already exists.</b></span> ';
}
else
{
$file = time().$_FILES["file"]["name"];
$sourcePath = $_FILES['file']['tmp_name'];  // Storing source path of the file in a variable
$targetPath = 'images/profile/'.$file;   // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file
echo $sql = "UPDATE `sitter_application` SET  picture = '$file' WHERE `sitter_application`.`id` = $id";
$wpdb->query($sql);

echo "<span id='success'>Image Uploaded Successfully...!!</span><br/>";
echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>";
echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>";
echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>";
}
}
}
else
{
echo "<span id='invalid'>***Invalid file Size or Type***<span>";
}
}