title: PHP AJAX Image Uploading with FormData
body: <p>I am relatively new to jQuery and Ajax functions, but have been working with Ajax forms over the past few days. I have come to a problem with file uploads however when trying to upload images. Whilst looking for resources, I couldn't find anything useful because they seem to be over-complicated with pointless extras or have no explanation whatsoever, which doesn't help me to learn any further.</p>
  
  <p>I have wrote this code to handle the image upload in Ajax:</p>
  
  <pre><code>$(function() {
      $('.input_photo').on("change",function() {                              
          var formData = new FormData($('form.upload-form'));
  
          $.ajax({
              url: "upload.php",
              type: "POST",
              data: formData,
              success: function (msg) {
                  alert(msg)
              }
          });
      });
  });
  </code></pre>
  
  <p>This sends a request to the <code>upload.php</code> file, however no data is sent, basically my form is literally this:</p>
  
  <pre><code>&lt;form class="upload-form"&gt;
       &lt;input type="file" name="input_photo" class="input_photo" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>No data seems to be passed in the headers whatsoever and I assume I would access it through PHP with <code>$_POST['data']</code> array or <code>$_FILES</code>? Someone with better knowledge please help to explain this, it'd be great to understand this further.
  Thanks.</p>