dropzone.js maxfilesexceeded事件未触发

dropzone.js maxfilesexceeded事件未触发

问题描述:

我一直在环顾四周并使用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