通过PHP通过Ajax上传图像[最简单的方法]

Question

I have studied a lot of answers in stackOverflow but haven't figured out the simplest way of uploading an image from a form. I am trying to figure out a way to upload an image using Ajax. Although the form, PHP and Ajax coding is huge, I am giving you the important parts. When I click the submit button, error message is shown, viz undefined index .

HTML

<form method="post" enctype="multipart/form-data">
<tr>
    <th>Image</th>
    <td><input type="file" name="image" id="img"></td>
  </tr>
</form>

Ajax

$(document).on('click','#sub_prod',function(event){
        event.preventDefault();
        $.ajax({
            url:"product_add_back.php",
            method:"post",
            data:$('form').serialize(),
            dataType:"html",
            success:function(strMsg){
                    $("#prod_add").html(strMsg).show().fadeOut(3000);

                }

            })

})

PHP

$image_name=$_FILES["image"]["name"];
echo $image_name;
die();

Answer 1

$().serialize() will not include $_FILES content, so you need to use FormData object

$(document).on('click','#sub_prod',function(event){
    event.preventDefault();
    var formdata = new FormData($('form')[0]);

    $.ajax({
        url: "product_add_back.php",
        method: "post",

        data: formData,
        processData: false,
        contentType: false,

        success: function(strMsg){}
    });
});

Please note that you pass 3 params: data: formData , processData: false and contentType: false