title: Ajax not sending file upload data to php
body: <p>I've been having trouble getting my ajax script to properly post to my php file. I've done various checks, and my ajax is definitely registering the image files, but it's not posting to the php (it echos no data set). Any idea why the file isn't being posted? Here is the AJAX and PHP:</p>
  
  <pre><code>$(function()
  {
  // Variable to store your files
  var files;
  
  // Add events
  $('input[type=file]').on('change', prepareUpload);
  $("form").submit(function(event){
      event.stopPropagation(); // Stop stuff happening
      event.preventDefault(); // Totally stop stuff happening
  
      // START A LOADING SPINNER HERE
  
      // Create a formdata object and add the files
      var data = new FormData();
  
      $.each(files, function(key, value)
      {
          console.log(files);
          data.append(key, value);
      });
  
      $.ajax({
          url: '../api/frs-upload.php',
          type: 'POST',
          data: data,
          cache: false,
          dataType: 'json',
          processData: false, // Don't process the files
          contentType: false, // Set content type to false as jQuery will tell the server its a query string request
          success: function(data, textStatus, jqXHR)
          {
              if(typeof data.error === 'undefined')
              {
                  // Success so call function to process the form
                  submitForm(event, data);
              }
              else
              {
                  // Handle errors here
                  console.log('ERRORS: ' + data.error);
              }
          },
          error: function(jqXHR, textStatus, errorThrown)
          {
              // Handle errors here
              console.log('ERRORS: ' + textStatus);
              // STOP LOADING SPINNER
          }
      });
  });
  
  // Grab the files and set them to our variable
  function prepareUpload(event)
  {
      files = event.target.files;
      for (var i = 0, file; file = files[i]; i++) {
          console.log(file);
      }
  }
  
  // Catch the form submit and upload the files
  function uploadFiles(event)
  {
      event.stopPropagation(); // Stop stuff happening
      event.preventDefault(); // Totally stop stuff happening
  
      // START A LOADING SPINNER HERE
  
      // Create a formdata object and add the files
      var data = new FormData();
  
      $.each(files, function(key, value)
      {
          alert("test");
  
          alert(key + ": " + value)
          data.append(key, value);
      });
  
  
      $.ajax({
          url: '/api/frs-upload.php?files',
          type: 'POST',
          data: data,
          cache: false,
          dataType: 'json',
          processData: false, // Don't process the files
          contentType: false, // Set content type to false as jQuery will tell the server its a query string request
          success: function(data, textStatus, jqXHR)
          {
              if(typeof data.error === 'undefined')
              {
                  // Success so call function to process the form
                  submitForm(event, data);
              }
              else
              {
                  // Handle errors here
                  console.log('ERRORS: ' + data.error);
              }
          },
          error: function(jqXHR, textStatus, errorThrown)
          {
              // Handle errors here
              console.log('ERRORS: ' + textStatus);
              // STOP LOADING SPINNER
          }
      });
  }
  
  function submitForm(event, data)
  {
      // Create a jQuery object from the form
      $form = $(event.target);
  
      // Serialize the form data
      var formData = $form.serialize();
  
      // You should sterilise the file names
      $.each(data.files, function(key, value)
      {
          formData = formData + '&amp;filenames[]=' + value;
      });
  
      $.ajax({
          url: 'submit.php',
          type: 'POST',
          data: formData,
          cache: false,
          dataType: 'json',
          success: function(data, textStatus, jqXHR)
          {
              if(typeof data.error === 'undefined')
              {
                  // Success so call function to process the form
                  console.log('SUCCESS: ' + data.success);
              }
              else
              {
                  // Handle errors here
                  console.log('ERRORS: ' + data.error);
              }
          },
          error: function(jqXHR, textStatus, errorThrown)
          {
              // Handle errors here
              console.log('ERRORS: ' + textStatus);
          },
          complete: function()
          {
              // STOP LOADING SPINNER
          }
      });
  }
  });
  </code></pre>
  
  <p>PHP:</p>
  
  <pre><code>&lt;?php
  if($_FILES['file']['name']){
  $data = array();
  
      $error = false;
      $files = array();
  
      $uploaddir = 'uploads/';
      $uploadfile = $uploaddir . $_FILES["file"]["name"];
      $filename = $_FILES["file"]["name"];
  
          if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)){
              $files[] = $uploaddir .$file['name'];
          } else {
              $error = true;
          }
      $data = ($error) ? array('error' =&gt; 'There was an error uploading your files in: ' . $filename) : array('files' =&gt; $files);
  
  
  
  echo json_encode($data);
  } else {
  echo json_encode(array('error' =&gt; 'No data set'));
  }
  </code></pre>