php用ajax上传多个文件

Question

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?

    $("#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); }
        });
    });

php

    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 => $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 '<pre>', print_r($_POST, 1), '</pre>';
}

so empty($_FILES['files']['name'][0] is returning true and the print_r($_POST) is empty it seems.

html form

<form id="folder_upload" action="" method="post" enctype="multipart/form-data">
              <input type="file" class="hide" name="files[]" id="folder_open_id" multiple directory webkitdirectory mozdirectory/>
              <input type="submit" class="hide" value="upload" id="folder_open_upload" />
        </form>

Here is my js after Mephoros answer, my $_FILES array still seems to be empty:

$.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); }
    });

Answer 1

Based on some preliminary research, utilize FormData and set processing and contentType to false.

$.ajax({
  // ...
  data: new FormData($(this)),
  processData: false,
  contentType: false,
  // ...
});

Sources:

• http://portfolio.planetjon.ca/2014/01/26/submit-file-input-via-ajax-jquery-easy-way/
• http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

See: http://api.jquery.com/jquery.ajax/

See: https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects