upload more than one image with ajax - php

Question

I wrote script that alows users to submit comment text with image, and I did it with ajax.
yes - upload image with ajax. it's not drag & drop...
I would like to expand this scrpit and alow users to upload more than one file/image. my code don't support that (server side gets only 1 file). can you help me to fix it so I could upload array of files?
HTML:
<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data">
<input type='hidden' name='comment[pageName]' value='yard' class="pagename-field" />
<input type='hidden' name='comment[refID]' value='0' class="refid-field" />
<input type='hidden' name='allowReply' value='1' class="allowReply-field" />
<textarea class="form-control comment-field" name="comment[text]" rows="1" placeholder="כתוב/י תגובה"></textarea>
<input type='file' name='file[]' class='form-control file-field hideBox' maxlength='1' accept="image/jpg,image/png,image/jpeg,image/gif" id="uploadFile0"/>
<button class="btn btn-primary submit" >SUBMIT</button>
<img src="images/loading.gif" align="absmiddle" class="loader" id="loader">
</form>
JS:
$(function() {
$(document).on('submit','form',function(e) {
e.preventDefault();
var $form = $(this);
var act = 'add';
var file_data = $form.find('.file-field').prop('files')[0];
var form_data = new FormData();
form_data.append('act', act);
form_data.append('comment[text]', $form.find('.comment-field').val());
form_data.append('comment[pageName]', $form.find('.pagename-field').val());
form_data.append('comment[refID]', $form.find('.refid-field').val());
form_data.append('allowReply', $form.find('.allowReply-field').val());
form_data.append('feel', $form.find('.feel-field').val());
form_data.append('file[]', file_data);
$("#loader").show();
// alert(form_data);
$.ajax({
type: "POST",
url: "ajax/addComment.php",
dataType: 'text',
cache: false,
contentType: false,
processData: false,
async: false,
data: form_data,
success: function(data)
{
$("#loader").hide();
$('#commentsBox'+$form.find('.refid-field').val()).prepend(data);
$("form").reset();
}
});
return false; // avoid to execute the actual submit of the form.
});
});

Answer 1

You can do it by FormData() object of jQuery. Refer the code below.
HTML:
<input type="file" name="multi_upload[]" multiple />
JQuery:
$(function() {
$(document).on('submit','form',function(e) {
var files = e.target.files;
var data = new FormData();
$.each(files, function (key, value)
{
data.append(key, value);
});
$.ajax({
url: "your-url",
type: 'POST',
data: data,
cache: false,
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)
{
alert("success");
}
});
});
});
PHP:
$tempfiles = $_FILES;
foreach ($tempfiles as $files) {
$_FILES['multi_upload'] = $files;
move_uploaded_file($_FILES['multi_upload']['tmp_name'],$_FILES['multi_upload']['name']);
}