javascript - 将带有图像的表单上传到ajax和php

Question

我正在将图像上传到ajax并使用表单发送到php。但是我搜索了很多源代码但仍然不知道。有人可以帮我完成代码吗？

 <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);
 }
 ?>


}

我如何使用ajax传递图像。因为我通过谷歌搜索但仍然不知道。任何人都可以帮我完成代码吗？确实需要很多帮助

Answer 1

正如 @I Can Has Kittenz 在评论中提到的，您可以使用 FormData 使用 ajax 上传文件。但问题是compatability ，您将无法获得对旧浏览器的支持。要使用 FormData 完整实现 ajax 文件上传，请检查此 article