Image upload via Ajax in PHP[simplest way] - php

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