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

I presume you are thinking that the way the file is passed to PHP directly, the same way you can pass through AJAX too. But that's not the case, you need to have a `FormData` object in order to pass a file through AJAX. This [post](http://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax) would help you. — AyB, Jun 15 '14 at 07:20
can u give the complete code for me? because i newbie here just entry to ajax — user3149572, Jun 15 '14 at 07:28

score 1 · Answer 1 · answered Jun 15 '14 at 07:32

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

answered Jun 15 '14 at 07:32

Jaison Justus

2,753
8
47
65

1

For compatibility you can use a hidden Iframe. – Jentel Jun 15 '14 at 07:33
i have read the article before but i dun know how to use it...need some coder help me complete it – user3149572 Jun 15 '14 at 07:36
@user3149572 you download the attachment in the article it will give you the complete demo code. you can find the demo code on the top right side of the article. – Jaison Justus Jun 15 '14 at 07:39

upload form with image to ajax and php

1 Answers1