<input type="file" name="file" id="file" /> 

<div style="background:url() no-repeat"> 
<span id="uploaded_image" ><img src=" '.$row["carimg"].' " height="150" width="225" class="img-thumbnail" /></span></div>

Here is the ajax code

<script> 
$(document).ready(function(){ 
$(document).on('change', '#file', function(){ 
var name = document.getElementById("file").files[0]... 
var form_data = new FormData(); 
var ext = name.split('.').pop().toLowerCase(); 
if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -1) 
{ 
alert("Invalid Image File"); 
} 
var oFReader = new FileReader(); 
oFReader.readAsDataURL(document.getEleme... 
var f = document.getElementById("file").files[0]... 
var fsize = f.size||f.fileSize; 
if(fsize > 2000000) 
{ 
alert("Image File Size is very big"); 
} 
else 
{ 
form_data.append("file", document.getElementById('file').files[0]... 
$.ajax({ 
url:"up1.php", 
method:"POST", 
data: form_data, 
contentType: false, 
cache: false, 
processData: false, 
beforeSend:function(){ 
$('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>"); 
}, 
success:function(data) 
{ 
$('#uploaded_image').html(data); 
} 
}); 
} 
}); 
}); 
</script> 

here is the php

<?php

//upload.php
$id = $_FILES["vid"];

if($_FILES["file"]["name"] != '')
{
 $test = explode('.', $_FILES["file"]["name"]);
 $ext = end($test);
 $name = gen_random_string(6)."n" . '.' . $ext;
 $location = 'assets/img/cars/' . $name;  
 move_uploaded_file($_FILES["file"]["tmp_name"], $location);
 echo $id;
 echo '<img src="'.$location.'" height="150" width="225" class="img-thumbnail" />';

 $sql = "UPDATE vehicles SET carimg='".$location."' WHERE vid='".$id."'";
}
 mysqli_query($connect, $sql);  
?>

How to send more than one data in this php ajax form this one capable of sending one data only please help