通过单击外部模式触发dropzone取消事件

Question

我在使用dropzonejs上传文件组件的项目上工作。但是，在尝试使其更加自定义时，我遇到了这个问题。

如果单击模态窗口（bootstrap模式） 之外的某处，则应触发dropzonejs取消按钮事件（警告/确认框，请参见附图）。但它不是这样发生的，并且从未在文档中看到任何相关内容。

任何解决方案？

Answer 1

我已经通过下面描述的非常手动和肮脏的方式进行了讨论：

我使用window.onbeforeunload来制作我认为真实的东西和旗帜。重点是，在上传过程成功结束后，取消绑定onbeforeunlad以防止始终询问＆＃34;您确定要取消此上传吗？＆＃34;即使它完成了。

var cancelConfirmation = "Are you sure you want to cancel this upload?";

var isFileInProgress = false;

var uploadZone = $("form[class=dropzone]").dropzone({
    method: "post",
    uploadMultiple: false,
    parallelUploads: 1,
    dictCancelUploadConfirmation: cancelConfirmation,
    success: function (file, response) {
        isFileInProgress = false;

        window.onbeforeunload = function () { };
    },
    init: function () {
        this.on("error", function (file, response) {
            isFileInProgress = false;

            window.onbeforeunload = function () { /* unbind */ };
        });

        this.on("addedfile", function () {
            isFileInProgress = true;

            window.onbeforeunload = function () {
                return cancelConfirmation;
            };
        });

        this.on("complete", function () {
            isFileInProgress = false;

            window.onbeforeunload = function () { /* unbind */ };
        });

        this.on("canceled", function () {
            isFileInProgress = false;

            window.onbeforeunload = function () { /* unbind */ };
        });
    }
});

$(".modal").on('hide.bs.modal', function (event) {
    if (isFileInProgress && !confirm(cancelConfirmation)) {
        event.preventDefault();
    }
});