Multiple images uploading is not working multiple times in a page

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

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;
?>

Answer 2

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