Passing Image using Ajax to PHP -

i trying pass image , title field value php, process file uploads straight php using $_files array, not sure how create/pass array using ajax php. form:

<form role="form" name="updateproductform" id="updateproductform" method="post" enctype="multipart/form-data">      <input name="imgone" id="imgone" type="file" title="add image">     <a class="btn btn-primary" name="updateproduct" id="updateproduct">update product</a></div> </form> 

and trying use pass php:

$('#updateproduct').on('click', function() {     try {         ajaxrequest = new xmlhttprequest();     } catch (e) {         try {             ajaxrequest = new activexobject("msxml2.xmlhttp");         } catch (e) {             try {                 ajaxrequest = new activexobject("microsoft.xmlhttp");             } catch (e) {                 alert("your browser broke!");                 return false;             }         }        }     ajaxrequest.open("post", "../controller/productcontroller.php", true);     ajaxrequest.setrequestheader("content-type","application/x-www-form-urlencoded");     ajaxrequest.send("title=" + $("#title").val() + "&imgone=" + $("#imgone"));      // create function receive data sent server     ajaxrequest.onreadystatechange = function(){         if(ajaxrequest.readystate == 4){             console.log(ajaxrequest);         }     }  }); 

in php trying this:

if (isset($_post["edit"])) {     $id = $_post["edit"];     $imgname = $_files["file"]["imgname"]; } 

youssef

i did in 1 of project, , following code works me. please required modifications in code need.

my form button:

 <form name="upload_img" enctype="multipart/form-data" id="upload_img"> <input type="file" style="display:none" id="upload-image" name="upload-image"></input> <button id="upload_image" type="button">save</button> </form> 

my jquery/ajax :

$('#upload_image').click(function() {     var form = new formdata(document.getelementbyid('upload_img'));     //append files     var file = document.getelementbyid('upload-image').files[0];     if (file) {            form.append('upload-image', file);     }     $.ajax({         type: "post",         url: "url",         data: form,                      cache: false,         contenttype: false, //must, tell jquery not process data         processdata: false,         //data: $("#upload_img").serialize(),         success: function(data)         {             if(data == 1)                 $('#img_msg').html("image uploaded successfully");             else                 $('#img_msg').html("error while image uploading");         }     });     //alert('names');   });