javascript - 具有全局事件 queuecomplete 的一种形式的 dropzone 多个

Question

我有一个普通的简单表单，其中包含 2 个 dropload div 字段和经典表单字段。自动发现被禁用，它们有一个不同的 paramName 来处理它们在 php 上传页面中略有不同。

问题是要知道两个 DIV 中的所有内容是否都已上传。对于每个 dropload 对象，“queuecomplete”被触发 2 次。

处理这种情况的最佳方法是什么？上传工作，现在只有完成的事件处理是问题，只想知道两者是否都成功完成。

我也想在 php 帖子中使用其他两个输入字段

        myDropzone.on("sending", function(file, xhr, formData) {
            var data = $('#testform').serializeArray();
            $.each(data, function(key, el) {
                formData.append(el.name, el.value);
            });
        });

• 如果一切都完成了，我想向电子邮件地址发送邮件。

HTML：

<form action="file_upload.php" class="testform" enctype="multipart/form-data" id="testform">

    input number: <input type="text" id="myInput"/>
    input E-mail : <input type="email" name="mailadress" required /> 

    <div class="dropzone" id="invoices"></div>
    <div class="dropzone" id="documents"></div>

    <input type="submit" id='uploadfiles' value='Upload Files' >
</form>

JS：

<script type="text/javascript">
    Dropzone.autoDiscover = false;
    $('.dropzone').each(function(){
        var dropUrl = 'file_upload.php';
        var paramName = $(this).attr('id');
        var createImageThumbnails = false;
        var addRemoveLinks = true;
        var maxFiles =  50;
        var parallelUploads = 4;
        var maxFilesize = 25; // MB
        var acceptedFiles = "application/pdf";
        var autoProcessQueue = false
        
        $(this).dropzone({
            url: dropUrl,
            paramName: paramName, 
            createImageThumbnails: createImageThumbnails,
            addRemoveLinks: addRemoveLinks,
            maxFiles: maxFiles,
            parallelUploads: parallelUploads,
            maxFilesize: maxFilesize, // MB
            acceptedFiles: acceptedFiles,
            autoProcessQueue: autoProcessQueue,
            uploadMultiple: true,
            init: function(){
                var myDropzone = this;
                $('#uploadfiles').click(function(e) {
                    var count= myDropzone.files.length;
                    console.log("test event line, number of files: " + count);
                    e.preventDefault();
                    e.stopPropagation();
                    if(count >0){
                        myDropzone.processQueue();
                    }
                  
                });         
                myDropzone.on("sendingmultiple", function(files, response) {
                  console.log("sendingmultiple ");
                });
                myDropzone.on("successmultiple", function(files, response) {
                  console.log("successmultiple ");
                });
                myDropzone.on("queuecomplete", function(files, response) {
                  console.log("queuecomplete ");
                });
                myDropzone.on("errormultiple", function(files, response) {
                  console.log("errormultiple ");
                });
            }       
        });
    });
</script>

jquery min 和 dropzone 最新包含

标签： javascriptjquerydropzone.js