upload form with image to ajax and php

Question

i doing image upload to ajax and send to php with a form .but i have search a lot of source but still no idea.can anyone help me complete the code ?

 <form name="registerform" id="data">
    <div id="formleft">
             <input type="email" name="email" placeholder="Email Address"><br>
            <input type="file" id="pic" name="profile_pic" class="image_input" />
    <input type="button" name="register" value="Sign Up" onclick="re2()" /><br>
    </div>
 </form>


function re2()
{

var image=document.getElementById("pic").src;
var re_email1=$("[name=register_email]").val();
$.ajax({
    type : "get",
    url : "add.php",
    data :      "type=regis2&image="+image+"&re_email="+email,
    success : function(data){
        alert(data);
*/ how i get the image file from form and pass the file to here and send ?? */      

    }
});

}



 <?php
 if ($_GET['type'] == "regis2") 
 {
 $image=$_GET['image'];
 $email=$_GET['re_email'];
 $target_Path = 'image/';
 $target_Path = $target_Path.basename( $_FILES['image']['name'] );
 move_uploaded_file($_FILES["image"]["tmp_name"] , $target_Path);
 }
 ?>


}

how can i pass image using ajax.becuase i have search by google but still no idea. can anyone complete the code for me? really need a lot of help

Answer 1

As @I Can Has Kittenz mentioned in the comment you can use FormData to upload file using ajax. but the problem is compatability , you wont get support over old browsers. For complete implementation ajax file upload using FormData check this article