How to upload image with a specific row [id] with form AJAX PHP

Question

I am writing a code for image upload and want to implement AJAX for real time preview. As I have to upload an images with a specific row[id] and image file to upload in respective directory eg (images/).

My code is only working when inserting data in database with this code below.

function add() {
var valid = validate();
if(valid) {
    $.ajax({
        url: "add.php",
        type: "POST",
        data:  {image:$("#add-image").val(),fname:$("#add-fname").val(),image_text:$("#add-image_text").val(),address:$("#address").val(),price:$("#price").val(),contact:$("#contact").val()},
        success: function(data){ getresult("getresult.php"); }
       });
    }
}

My problem is I am trying to insert image file to specific folder and into database with id,fname,image_text,etc...How do I go about changing this{image:$("#add-image").val(), so that i can upload into database to folder target.

Please help me out and provide solution.

Below is the code -

<form name="frmToy" method="post" action="" id="frmToy">
    <div>
    <label style="padding-top:20px;">Name</label>
    <span id="image-info" class="info"></span><br/>
    <input type="text" name="image" id="add-image" class="demoInputBox">
    </div>
    <div>
    <label style="padding-top:20px;">Name</label>
    <span id="fname-info" class="info"></span><br/>
    <input type="text" name="fname" id="add-fname" class="demoInputBox">
    </div>
    <div>
    <label>image_text</label>
    <span id="image_text-info" class="info"></span><br/>
    <input type="text" name="image_text" id="add-image_text" class="demoInputBox">
    </div>
    <div>
    <label>address</label> 
    <span id="address-info" class="info"></span><br/>
    <input type="text" name="address" id="address" class="demoInputBox">
    </div>
    <div>
    <label>Price</label> 
    <span id="price-info" class="info"></span><br/>
    <input type="text" name="price" id="price" class="demoInputBox">
    </div>
    <div>
    <label>Contacts</label> 
    <span id="contact-info" class="info"></span><br/>
    <input type="text" name="contact" id="contact" class="demoInputBox">
    </div>
    <div>
    <input type="button" name="submit" id="btnAddAction" value="Add" onClick="add();" />
    </div>
    </form>

My script

function getresult(url) {    
$.ajax({
    url: url,
    type: "POST",
    data:  {rowcount:$("#rowcount").val(),image:$("#image").val(),fname:$("#fname").val(),image_text:$("#image_text").val()},
    success: function(data){ $("#toys-grid").html(data); $('#add-form').hide();}
   });
}
getresult("getresult.php");
function add() {
var valid = validate();
if(valid) {
    $.ajax({
        url: "add.php",
        type: "POST",
        data:  {image:$("#add-image").val(),fname:$("#add-fname").val(),image_text:$("#add-image_text").val(),address:$("#address").val(),price:$("#price").val(),contact:$("#contact").val()},
        success: function(data){ getresult("getresult.php"); }
       });
    }
}

Add.php

require_once("dbcontroller.php");
$db_handle = new DBController();
$result = mysql_query("INSERT INTO cls_vehicles(fname, image_text, address, 
price, contact) VALUES('".$_POST["fname"]."','".$_POST["image_text"]."',
'".$_POST["address"]."','".$_POST["price"]."','".$_POST["contact"]."')");