Multiple images uploading is not working multiple times in a page - php

Question

I am trying to edited multiple images upload in more than once.
But is not working.Please update any suggestions or answer.
Below sample code:
<div id="upload_form" class="hide">
<form action="multi_files.php" target="hidden_iframe" enctype="multipart/form-data" method="post">
<input type="file" multiple name="upload_files[]" id="upload_files">
</form>
</div>
<div align="center" style="padding:10px">
<button onclick="Uploader.upload();" class="btn btn-primary btn-lg">Upload Files</button>
<div id="wait" class="hide"><img src="upload-indicator.gif" alt=""></div>
</div>
<div>
<iframe name="hidden_iframe" id="hidden_iframe" class="hide"></iframe>
</div>
<div id="uploaded_images" align="center">
</div>
Here I am add this code for another upload option with different form.
But is not working.Below the edited code:
<!--####### Below Edited as same on above #######-->
<div id="upload_form_cover" class="hide">
<form id="upload_form_cover" action="multi_files_cover.php" target="hidden_iframe" enctype="multipart/form-data" method="post">
<input type="hidden" name="image_type" value="cover_image" >
<input type="file" multiple name="upload_files_cover[]" id="upload_files_cover">
</form>
</div>
<div align="center" style="padding:10px">
<button onclick="Uploader_cover.upload();" class="btn btn-primary btn-lg">Upload Files TEST</button>
<div id="wait_cover" class="hide"><img src="upload-indicator.gif" alt=""></div>
</div>
JavaScript Code :
<script type="text/javascript">
var Uploader = (function () {
jQuery('#upload_files').on('change', function () {
jQuery("#wait").removeClass('hide');
jQuery('#upload_files').parent('form').submit();
});
var fnUpload = function () {
jQuery('#upload_files').trigger('click');
}
var fnDone = function (data) {
var data = JSON.parse(data);
if (typeof (data['error']) != "undefined") {
jQuery('#uploaded_images').html(data['error']);
jQuery('#upload_files').val("");
jQuery("#wait").addClass('hide');
return;
}
var divs = [];
for (i in data) {
divs.push("<div><img src='" + data[i] + "' style='height:100px' class='img-thumbnail'></div>");
}
jQuery('#uploaded_images').html(divs.join(""));
jQuery('#upload_files').val("");
jQuery("#wait").addClass('hide');
}
return {
upload: fnUpload,
done: fnDone
}
}());
<!--####### Belo Edited as same on above for form id: upload_form_cover #######-->
var Uploader_cover = (function () {
alert("Uploader_cover");
jQuery('#upload_files_cover').on('change', function () {
jQuery("#wait_cover").removeClass('hide');
jQuery('#upload_form_cover').submit();
});
var fnUpload = function () {
jQuery('#upload_files_cover').trigger('click');
}
var fnDone = function (data) {
var data = JSON.parse(data);
if (typeof (data['error']) != "undefined") {
jQuery('#uploaded_images_cover').html(data['error']);
jQuery('#upload_files_cover').val("");
jQuery("#wait_cover").addClass('hide');
return;
}
var divs = [];
for (i in data) {
divs.push("<div><img src='" + data[i] + "' style='height:100px' class='img-thumbnail'></div>");
}
jQuery('#uploaded_images_cover').html(divs.join(""));
jQuery('#upload_files_cover').val("");
jQuery("#wait_cover").addClass('hide');
}
return {
upload: fnUpload,
done: fnDone
}
}());
</script>
</body>

Answer 1

You are not submitting the right dom ie form in both functions. Put this.
jQuery('#upload_files').on('change', function () {
jQuery("#wait").removeClass('hide');
$(this).parent().submit();
});

Answer 2

First create a "arts" folder for putting image on it
index.html
<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
<input type="file" name="upl" multiple />
</form>
upload.php
<?php
$allowed = array('png', 'jpg', 'jpeg', 'gif', 'swf'); //The file you want to user put
if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){
$extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);
if(!in_array(strtolower($extension), $allowed)){
echo '{"status":"error"}';
exit;
}
if(move_uploaded_file($_FILES['upl']['tmp_name'], 'arts/'.$_FILES['upl']['name'])){
echo '{"status":"success"}';
exit;
}
}
echo '{"status":"error"}';
exit;
?>