Upload multiple files with single input with AJAX/jQuery/formData - php

Question

I am trying to make an upload form with AJAX/jQuery. The problem is i can't upload multiple files from a single input. With this code I can upload 1 file:
HTML:
<form name="myform" id="myform" enctype="multipart/form-data">
<input name="file[]" type="file" multiple />
<input type="button" value="Upload" />
</form>
jQuery:
$(document).ready(function(){
$(':button').click(function(){
var formData = new FormData();
formData.append('file', $('input[type=file]')[0].files[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
dataType:"json",
async: true,
success: function(data) {
console.log(data.Result);
},
data: formData,
cache: false,
contentType: false,
processData: false
});
});
});
I changed the formData part to this:
var formData = new FormData($('input[name^="file"]'));
$.each($('input[name^="file"]')[0].files, function(i, file){
formData.append(i, file);
});
the PHP part:
foreach($_FILES as $index => $file)
{
// for easy access
$fileName = $file['name'];
// for easy access
$fileTempName = $file['tmp_name'];
// check if there is an error for particular entry in array
if(!empty($file['error'][$index]))
{
// some error occurred with the file in index $index
// yield an error here
return false;
}
// check whether file has temporary path and whether it indeed is an uploaded file
if(!empty($fileTempName) && is_uploaded_file($fileTempName))
{
// move the file from the temporary directory to somewhere of your choosing
move_uploaded_file($fileTempName, ROOT_DIR . '/uploads/xPhoto/' . $fileName);
// mark-up to be passed to jQuery's success function.
echo '<p>Click <strong>' . $fileName . '</strong> to download it.</p>';
}
}
So my question is, how can I upload multiple files with a single input?

Answer 1

This works for me. Let's you upload multiple files from single input. All accessible from the $_FILES global in php.
var formData = new FormData();
var files = $('#files_input').prop('files');
$.each(files, function(i, file) {
formData.append("file_" + i, file);
});

Answer 2

I have the exact method of gathering the files in one of my (old) projects.
HTML
<input id="files" type="file" name="files[]" multiple />
jQuery
var fd = new FormData();
$.each($('#files')[0].files, function(i, file) {
fd.append(i, file);
});
// Other form data can be set and passed using:
// fd.append('POST_key', $input_object.val());
$.ajax({
url: var_your_file_handler,
type: 'POST',
data: fd,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jquery not to set content type
...
)};
I believe - it's an old project - that processData and contentType need to be false in order for the fd object to be sent in the request as it would have been during a normal form submission. As long as the AJAX request is POST, files can be gathered in PHP using $_FILES.