单页php中的多个dropzone.js

Question

嘿伙计我在一个页面中遇到多个dropzone.js的问题。您可以查看下面的代码。

HTML和php代码：

<?php for($i=0; $i= const; $i++){?>
    <form id="upload1-<?php echo $i; ?> " method="post" enctype="multipart/form-data">
      <input type="hidden" id="key" name="key" value="<?php echo $key;?>">
      <div id="dZUpload-<?php echo $i?>" class="dropzone dZUpload">
         <div class="dz-default dz-message"></div>
            <button type="button" class="btn btn-primary pull-right submit_files" id="<?php echo $key;?>">Submit this form!</button>
        </div>
     </form>
<?php } ?>

这是我的代码

的javascript部分

$(document).ready(function(){

    Dropzone.autoDiscover = false;
    var key;
    for (var i = 1; i <= $('.dropzone').length; i++) {
    if("dZUpload-"+i){
        $("#dZUpload-"+i).dropzone({
            url: "<?php echo site_url('uploadfile.html');?>",
            paramName: "file", 
            maxFilesize: 2,
            autoProcessQueue: false,
            addRemoveLinks: true,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            init: function() {                    
                var myDropzone = this; // closure 
                $(".submit_files").off().on("click", function(e) {
                    key = $(this).attr('id');
                    e.preventDefault();
                    e.stopPropagation();
                    console.log(myDropzone);
                    alert(myDropzone.getAcceptedFiles());
                        if (myDropzone.getQueuedFiles().length > 0) {                        
                            myDropzone.processQueue();  
                        }                                   

                    myDropzone.processQueue();              
                }); 

                this.on("sendingmultiple", function(file, xhr, formData) {                      
                    formData.append("key_campiagn", key); 
                });   
            },
            success: function (file, response) {
                var imgName = response;
                file.previewElement.classList.add("dz-success");         
            },
            addfiles: function(file) {
                            alert(file);
            },
            error: function (file, response) {
                file.previewElement.classList.add("dz-error");
            }
        });
    }
    }
    });

所以对于第一个dropzone，如果我删除文件和console.log（myDropzone）。如果是空的，我会找到一个attritube文件。但是当我在最后一个dropzone中拖放文件时，该属性包含我拖放的文件的详细信息。所以我的代码有什么问题。我希望所有dropzone都将隐藏输入字段值的文件提交到所需的url。但是当我拖放图像时，每个dropzone都会创建模板。