How to send more than one data in this php ajax form

Question

here in ajax script input with id name'file' is fine i want data from input with id 'vid' also sent using ajax how to later below code

<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

Answer 1

Add below form_data.append("file", document.getElementById('file').files[0]

this statement

form_data.append("vid",document.getElementById('vid').innerHTML);

Since you are POST ing, so from your php file:

$vid = $_POST['vid'];