【问题标题】:Dropzone, how to not process queue if errors existDropzone,如果存在错误,如何不处理队列
【发布时间】:2016-02-29 09:21:01
【问题描述】:

所以我有一个带有 Dropzone 的表单,加上另一个我想提交的 textarea - 如果我插入一个超大文件或太多文件,我会在预览容器中收到“超大”错误等。但表单继续处理在按钮单击表单提交时(由于我的听众)。如果两个文件的文件大小都正确并且不超过最大文件限制,我如何才能提交?我看不到 Dropzone 事件说“没有错误”来添加点击事件侦听器 - 我想我已经接近但现在半卡住了,我有以下内容:

$(function() {

var minImageWidth = 300, minImageHeight = 300;

Dropzone.options.jobApplicationUpload = {
    autoProcessQueue: false,
    addRemoveLinks: true,
    uploadMultiple: true,
    paramName: 'file',
    previewsContainer: '.dropzone-previews',
    acceptedFiles: '.pdf, .doc, .docx',
    maxFiles: 2,
    maxFilesize: 2, // MB   
    dictDefaultMessage: '',
    clickable: '.fileinput-button',

    accept: function(file, done) {            

        done();
    },

    // The setting up of the dropzone           
    init: function() {
        var myDropzone = this;              

        // First change the button to actually tell Dropzone to process the queue.
        this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {

            // Make sure that the form isn't actually being sent.
            if(myDropzone.files.length > 0) {

                $('#job-application-container').hide();
                $('#spinner-modal').modal('show');
                $('#spinner-modal p').html('<b>Sending your application,</b> please wait...</p>');  

                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue(); 
            }

        });

        this.on("success", function(files, response) {


        // Gets triggered when the files have successfully been sent.
        // Redirect user or notify of success.

            $('#job-application-container').hide();
            console.log('okay' + response);
            localStorage['success'] = 'test';
            location.reload();

        }); 



    }

};

});

【问题讨论】:

    标签: javascript jquery dropzone.js


    【解决方案1】:

    如果要验证 dropzone 错误,可以检查其中包含的拒绝文件。

    一个简单的例子(仅限一个文件,maxfilesize 为 1Mb 并使用 4.3.0 版本):

    var myDropzone = new Dropzone("div#myDropzone", {
        url: "toLoadUrl",
        autoProcessQueue: false,
        uploadMultiple: false,
        maxFiles: 1,
        maxFilesize: 1,
        init: function() {
            this.on("addedfile", function() {
                if (this.files[1]!=null){
                    this.removeFile(this.files[0]);
                }
            });
        }
    });
    $('#toServerButton').on('click',function(e){
        e.preventDefault();
        if (myDropzone.files.length == 0){
            alert("You should be select any file");
        } else if(myDropzone.getRejectedFiles().length > 0) {
            alert("The attached file is invalid");
        } else {
            myDropzone.processQueue();
        }
    });
    

    希望对你有用。

    问候,Yecid

    【讨论】:

    • 我们知道哪些文件被拒绝,但我们不知道它们被拒绝的原因。此外,它们仅在“autoQueue”设置为 false 时被拒绝
    猜你喜欢
    • 2015-07-05
    • 1970-01-01
    • 2023-03-07
    • 2020-07-18
    • 1970-01-01
    • 2019-12-12
    • 1970-01-01
    • 2014-01-14
    • 1970-01-01
    相关资源
    最近更新 更多