多个图像上传在页面中不能多次运行

Question

我正在尝试多次上传多个图片。 但是没有用。请更新任何建议或答案。 下面的示例代码：

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

这里我将为另一个上传选项添加此代码，其中包含不同的表单。 但是没有用。修改编辑的代码：

<!--####### 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代码：

<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

首先创造一个＆＃34;艺术＆＃34;用于放置图像的文件夹

的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

您没有在两个函数中提交正确的dom即表单。放这个。

 jQuery('#upload_files').on('change', function () {
    jQuery("#wait").removeClass('hide');
    $(this).parent().submit();
 });