title: php Uploading multiple files with ajax
body: <p>I've managed to upload multiple files using my current php and html form and wanted to fancy it up a bit with some ajax and automatically submitting the form. I've hidden the 'file' input and submit button so the form is handeled by the js (mentioning this incase it may affect form submission, form does submission and I've checked via HTTP headers). The ajax section of my js is what I normally use for ajax and standard forms, however when i submit the form my $_FILES is empty so I guess I'm not using the ajax correctly here? What do I need to change in my ajax to handle file uploads? </p>
  
  <pre><code>    $("#add_button").click(function(e)
     {
         e.preventDefault();
         $("#folder_open_id").trigger("click");
         $("#folder_open_id").change(function()
         {
            $("#folder_upload").submit();
         });
     });
  
  
     $("#folder_upload").submit(function(event)
     {
          var formdata   =   $(this).serialize();
          event.preventDefault();
  
          $.ajax
          ({
             url: "index.php",
             type: "POST",
             data: formdata,
             success: function(response) { $("#response_div").html(response); },
             error: function(response) { alert(response); }
          });
      });
  </code></pre>
  
  <p>php</p>
  
  <pre><code>    if($_SERVER['REQUEST_METHOD'] == 'POST')
  {
      if(!empty($_FILES['files']['name'][0]))
      {
  
          $files      =   $_FILES['files'];
          define('CPATH', $_SERVER['DOCUMENT_ROOT'] . "/uploads/");
          $uploaded   =   array();
  
          foreach($files['name'] as $position =&gt; $file_name)
          {
              $file_temp  =   $files['tmp_name'][$position];
              $file_new   =   "./uploads/" . $files['name'][$position];
  
                  if(move_uploaded_file($file_temp, $file_new))
                      echo "success";
                  else
                      echo "fail, temp: " . $file_temp . " new: " . $file_new;
          }
      }
      else 
          echo '&lt;pre&gt;', print_r($_POST, 1), '&lt;/pre&gt;';
  }
  </code></pre>
  
  <p>so <code>empty($_FILES['files']['name'][0]</code>is returning true and the print_r($_POST) is empty it seems.</p>
  
  <p>html form</p>
  
  <pre><code>&lt;form id="folder_upload" action="" method="post" enctype="multipart/form-data"&gt;
                &lt;input type="file" class="hide" name="files[]" id="folder_open_id" multiple directory webkitdirectory mozdirectory/&gt;
                &lt;input type="submit" class="hide" value="upload" id="folder_open_upload" /&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>Here is my js after Mephoros answer, my $_FILES array still seems to be empty:</p>
  
  <pre><code>$.ajax
      ({
         url: "index.php",
         type: "POST",
         data: new FormData($(this)),
         processData: false,
         contentType: 'multipart/form-data; charset=UTF-8',
         success: function(response) { $("#response_div").html(response); },
         error: function(response) { alert(response); }
      });
  </code></pre>