dropzone.js maxfilesexceeded 事件未触发

Question

我一直在四处寻找并使用 dropzone.js 库玩了一会儿，但无法获得 maxfilesexceeded event to fire. I have looked at the How to limit the number of dropzone.js files uploaded? post 的信息并已更新到最新版本库，但事件仍然不会触发。

我正在按照上面 post 中的建议在 init() 函数中初始化侦听器。我能够捕获 maxfilesreached 事件但不能捕获 maxfilesexceeded 事件

$scope.fileUploadConfig = {
    options: {
        url: uploadFileURL,
        maxThumbnailFilesize: 200,
        maxFiles: 5,
        uploadMultiple: false,
        acceptedFiles: "application/vnd.oasis.opendocument.text,application/rtf,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,.xls,.xlsx,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,.ppt,.pptx,image/*,.mp3,.m4a,.ogg,.wav,.wma",
        addRemoveLinks: true,
        paramName: "file",
        dictRemoveFile: "Remove",
        clickable: true,
        previewTemplate: $("#dropzone-preview-template").html(),
        init: function() {
            var instance = this,
                selectedPageId = 0;

            instance.on("success", function(event, data) {
                /* ... */
            });

            instance.on("addedfile", function() {
                /* ... */ 
            });

            instance.on("removedfile", function(file) {
                /* ... */
            });

            instance.on("maxfilesreached", function(file) {
                alert("MAX_FILES_REACHED");
            });

            instance.on("maxfilesexceeded", function(file) {
                alert("MAX_FILES_EXCEEDED");
            });
        }
    }
};

除 maxfilesexceeded 事件外，所有代码都按预期工作。

Answer 1

我在下面创建了这个测试用例：

Dropzone.autoDiscover = true;
Dropzone.options.fbDropZone = {
    init: function () {
        instance = this;
        instance.on("maxfilesreached", function(file) {
                alert("MAX_FILES_REACHED");
        });
        instance.on("maxfilesexceeded", function(file) {
                alert("MAX_FILES_EXCEEDED");
        });
    },
    previewTemplate: '<div class="dz-preview dz-file-preview"><div class="dz-details"><div class="dz-filename"><span data-dz-name></span></div><div class="dz-size" data-dz-size></div><img data-dz-thumbnail /></div><div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div><div class="dz-success-mark"><span>✔</span></div><div class="dz-error-mark"><span>✘</span></div><div class="dz-error-message"><span data-dz-errormessage></span></div></div>',
    paramName: "file",
    maxFiles: 1,
    autoProcessQueue: false
};

#drop_zone {
    width: 50%;
    border: 2px dashed #BBB;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    color: #BBB;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<div id='drop_zone'>
    <form action="/uploads.php" class='dropzone' id='fbDropZone'></form>
</div>

当你用 angularjs 挂钩 dropzonejs 时，你最好为 dropzonejs 创建一个指令

dropzone.js maxfilesexceeded 事件未触发

dropzone.js maxfilesexceeded event not firing

javascript

asp.net-mvc

angularjs

dropzone.js