title: Passing Image using Ajax to PHP
body: <p>I am trying to pass an image and a title field value to PHP, I usually process file uploads straight with PHP using the $_FILES array, I am not sure how to create/pass this array using ajax to PHP.
  My form:</p>
  
  <pre><code>&lt;form role="form" name="updateProductForm" id="updateProductForm" method="POST" enctype="multipart/form-data"&gt; 
      &lt;input name="imgOne" id="imgOne" type="file" title="Add Image"&gt;
      &lt;a class="btn btn-primary" name="updateProduct" id="updateProduct"&gt;Update Product&lt;/a&gt;&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And I am trying to use this to pass to PHP:</p>
  
  <pre><code>$('#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() + "&amp;imgOne=" + $("#imgOne"));
  
      // Create a function that will receive data sent from the server
      ajaxRequest.onreadystatechange = function(){
          if(ajaxRequest.readyState == 4){
              console.log(ajaxRequest);
          }
      }
  
  });
  </code></pre>
  
  <p>In PHP I am trying this:</p>
  
  <pre><code>if (isset($_POST["edit"])) {
      $id = $_POST["edit"];
      $imgName = $_FILES["file"]["imgName"];
  }
  </code></pre>
  
  <p>Youssef</p>