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。但最大的问题是：

dropzone非常不一致。对于3个文件，它调用3个请求文件。对于8个文件，它可以调用4个请求文件。但它应该只调用1.问题是，如果我允许用户在函数中给出一个回调作为参数并在上传的成功事件中调用它，它将多次调用该回调（但它应该只调用它）一次）。

Answer 1

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

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

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

解决方案是手动触发文件上传，为此，您需要将autoProcessQueue设置为false，只需提及一个示例，您可以使用触发上传的按钮，在{{1 }}选项为触发init方法的按钮添加事件侦听器。这是这个解决方案的一个例子：

HTML：

processQueue()

js：

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

我刚刚将相关部分包含在内，您可以将其添加到现有配置中。这也将解决selector.dropzone({ autoProcessQueue: false, uploadMultiple: true, init: function () { var submitButton = document.querySelector("#submit-all"); myDropzone = this; submitButton.addEventListener("click", function () { myDropzone.processQueue(); }); } })事件的问题。

Dropzone.js无法正常工作

1 个答案: