Answer by ajmicek for Sending multipart/formdata with jQuery.ajax

Just wanted to add a bit to Raphael's great answer. Here's how to get PHP to produce the same $_FILES, regardless of whether you use JavaScript to submit.

HTML form:

<form enctype="multipart/form-data" action="/test.php"method="post" class="putImages"><input name="media[]" type="file" multiple/><input class="button" type="submit" alt="Upload" value="Upload" /></form>

PHP produces this $_FILES, when submitted without JavaScript:

Array(    [media] => Array        (            [name] => Array                (                    [0] => Galata_Tower.jpg                    [1] => 518f.jpg                )            [type] => Array                (                    [0] => image/jpeg                    [1] => image/jpeg                )            [tmp_name] => Array                (                    [0] => /tmp/phpIQaOYo                    [1] => /tmp/phpJQaOYo                )            [error] => Array                (                    [0] => 0                    [1] => 0                )            [size] => Array                (                    [0] => 258004                    [1] => 127884                )        ))

If you do progressive enhancement, using Raphael's JS to submit the files...

var data = new FormData($('input[name^="media"]'));     jQuery.each($('input[name^="media"]')[0].files, function(i, file) {    data.append(i, file);});$.ajax({    type: ppiFormMethod,    data: data,    url: ppiFormActionURL,    cache: false,    contentType: false,    processData: false,    success: function(data){        alert(data);    }});

... this is what PHP's $_FILES array looks like, after using that JavaScript to submit:

Array(    [0] => Array        (            [name] => Galata_Tower.jpg            [type] => image/jpeg            [tmp_name] => /tmp/phpAQaOYo            [error] => 0            [size] => 258004        )    [1] => Array        (            [name] => 518f.jpg            [type] => image/jpeg            [tmp_name] => /tmp/phpBQaOYo            [error] => 0            [size] => 127884        ))

That's a nice array, and actually what some people transform $_FILES into, but I find it's useful to work with the same $_FILES, regardless if JavaScript was used to submit. So, here are some minor changes to the JS:

// match anything not a [ or ]regexp = /^[^[\]]+/;var fileInput = $('.putImages input[type="file"]');var fileInputName = regexp.exec( fileInput.attr('name') );// make files availablevar data = new FormData();jQuery.each($(fileInput)[0].files, function(i, file) {    data.append(fileInputName+'['+i+']', file);});

(14 April 2017 edit: I removed the form element from the constructor of FormData() -- that fixed this code in Safari.)

That code does two things.

1. Retrieves the input name attribute automatically, making the HTML more maintainable. Now, as long as form has the class putImages, everything else is taken care of automatically. That is, the input need not have any special name.
2. The array format that normal HTML submits is recreated by the JavaScript in the data.append line. Note the brackets.

With these changes, submitting with JavaScript now produces precisely the same $_FILES array as submitting with simple HTML.