dropzone.js maxfilesexceeded事件未触发 [英] dropzone.js maxfilesexceeded event not firing

问题描述

我一直在环顾四周并使用dropzone.js库玩了一段时间，无法获得如何限制Dropzone的数量已上传.js文件?发布以获取信息，并已更新到该库的最新版本，但该事件仍不会触发.

I have been looking around and playing for a little while now with the dropzone.js library and cannot get the maxfilesexceeded event to fire. I have looked at the How to limit the number of dropzone.js files uploaded? post for info and have updated to the latest version of the library but the event still wont fire.

我正在上面的帖子中建议的init()函数中初始化监听器.我能够捕获 maxfilesreached 事件，但不能捕获 maxfilesexceeded 事件

I am initialising the listener in the init() function as suggested in the post above. I am able to catch the maxfilesreached event but not the maxfilesexceeded event

$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事件之外，所有代码均按预期工作.

All the code is working as expected except for the maxfilesexceeded event.

推荐答案

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

I create this test case bellow:

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>

当将dropzonejs与angularjs挂钩时，最好为dropzonejs创建指令

When you hook dropzonejs with angularjs, you better create a directive for dropzonejs

这篇关于dropzone.js maxfilesexceeded事件未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！