javascript - Dropzone.js 无法正常工作

Question

我有一个 dropzone 脚本，它将文件上传到某个目录。我确实已经阅读了很多文档，但仍然陷入困境。我有这个JS:

$(document).ready(function () {
    Dropzone.autoDiscover = false;
    var selectorElement = '.fileUploader';
    var selector = $(selectorElement);

    selector.addClass('dropzone');
    selector.dropzone({
        dictInvalidFileType: 'Kan bestand niet uploaden: ongeldige extensie.',
        dictFileTooBig: 'Kan bestand niet uploaden: bestand te groot.',
        dictResponseError: 'SERVER ERROR',
        paramName: 'file[]', // The name that will be used to transfer the file
        maxFilesize: 1000, // MB
        url: 'ajax/uploadFile.php',
        addRemoveLinks: true,
        enqueueForUpload: true,
        uploadMultiple: true,
        sending: function (file, xhr, formdata) {
            formdata.append('uploadPath', $(this)[0].element.dataset.uploadpath);
            $(this).css({width: $(this)[0].element.getAttribute('width'), height: $(this)[0].element.getAttribute('height')});
        },
        init: function ()
        {
            var myDropzone = this;

            this.on('maxfilesexceeded', function (file) {
                this.removeFile(file);
            });

            this.on('removedfile', function (file) {
                if (file.previewTemplate.children[6])
                {
                    var filePath = this.element.dataset.uploadpath + file.previewTemplate.children[6].value;
                    $.post('ajax/deleteFile.php', {file: filePath}, function (response) {
                        CMSnotification(response.message, response.type);
                    }, 'JSON');
                }
            });

            this.on('successmultiple', function (files, response) {
                var responseJSON = JSON.parse(response);
                CMSnotification(responseJSON.melding, responseJSON.type);

                if (responseJSON.type === 'foutmelding')
                {
                    for (var i = 0; i < files.length; i++)
                    {
                        var previewTemplate = $(files[i].previewTemplate);
                        previewTemplate.children('.dz-success-mark').css('display', 'none');
                        previewTemplate.children('.dz-error-mark').css('display', 'block');
                        previewTemplate.removeClass('dz-success').addClass('dz-error');
                    }
                }

                for (var i = 0; i < files.length; i++)
                {
                    var previewTemplate = $(files[i].previewTemplate);

                    if (!responseJSON.files[i])
                    {
                        previewTemplate.children('.dz-success-mark').css('display', 'none');
                        previewTemplate.children('.dz-error-mark').css('display', 'block');
                        previewTemplate.removeClass('dz-success').addClass('dz-error');
                    }
                    else
                    {
                        previewTemplate.append('<input type="hidden" name="fileNames[]" value="' + responseJSON.fileNames[i] + '">');
                        previewTemplate.append('<input type="hidden" name="extensions[]" value="' + responseJSON.extensions[i] + '">');
                    }
                }
            });
        },
        accept: function (file, done) {
            var extension = file.name.split('.').pop();
            extension = extension.toLowerCase();
            if ($.inArray(extension, window.allowedFileDropzoneExtensions) > -1) {
                done();
            }
            else {
                done('Bestands extensie niet toegestaan.');
            }
        }
    });
});

第一个问题是，我包含此文件一次，但它仍然给出错误 dropzone已经附加。但最大的问题是:

拖放区非常不一致。对于 3 个文件，它调用 3 个请求文件。对于8个文件，可以调用4个请求文件。但它应该只调用 1。问题是，如果我允许用​​户在函数中提供回调作为参数并在上传成功事件中调用它，它将多次调用该回调(但它应该只调用它一次)。

Answer 1

第一个问题是因为 .ready() 函数中有语句 Dropzone.autoDiscover = false ，这会导致触发它延迟。将此语句移到 .ready() 函数之外。

Dropzone.autoDiscover = false;
$(document).ready(function () {
    .........
})

第二个是由于 dropzone 的工作方式造成的，默认情况下，选项 autoProcessQueue 设置为 true，dropzone 在添加文件后立即上传文件。我认为不能保证一次上传多少个文件，但我认为默认情况下永远不会上传超过两个。

解决方案是手动触发文件的上传，为此，您需要将 autoProcessQueue 设置为 false，仅举一个示例，您可以在init 选项为触发 processQueue() 方法的按钮添加事件监听器。以下是此解决方案的示例:

html:

<button type="button" id="submit-all">Submit All</button>

js:

selector.dropzone({
    autoProcessQueue: false,
    uploadMultiple: true,
    init: function () {
        var submitButton = document.querySelector("#submit-all");
        myDropzone = this; 
        submitButton.addEventListener("click", function () {
            myDropzone.processQueue(); 
        });
    }
})

我刚刚包含了相关部分，您可以将其添加到现有配置中。这也将解决您的 successmultiple 事件问题。