单击按钮 'Save' 关闭 Dropzone

Question

我正在使用 Dropzone 插件上传图片，但有点小问题。单击 'Save' 按钮后，文件 POST 到服务器，但弹出窗口仍然显示在浏览器中。所以，我想知道，如果这是正常的插件行为，如果不是，我可以监听 'Save' 按钮上的点击事件，然后关闭弹出窗口吗？

已编辑

我的html

<div class="modal resource-creator-modal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Edit Resource</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button form="resource-creator" type="reset" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button form="resource-creator" type="submit" class="btn btn-success" data-loading-text="Proceed...">Save</button>
            </div>
        </div>
    </div>
</div>

Dropzone 初始化

initFileUpload: function() {
    if (this.dropzone) return;

    this.dropzone = new Dropzone(this.$('.dropzone-box').get(0), {
        url: this.options.url.fileUpload,


addRemoveLinks : true,
            maxFiles: 1,
            acceptedFiles: '.jpg, .mp4',
            dictResponseError: "Can't upload file!",
            thumbnailWidth: 138,
            thumbnailHeight: 120,

            previewTemplate: $('#drop-item-preview').html()
        });

        this.dropzone.on('complete', this._onUploadFileComplete.bind(this));
    }

Answer 1

由于您无法post完成与上传器相关的代码，因此无法根据您的上传器为您提供解决方案。但是，如果您理解下面的代码，您将能够实现您的目标。

this.on("complete", function (file) {
    if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
        // Some options to hide the Container or Modal
        $('#file-uploader-container').hide(); // If the uploader is in a Container hide it
        $('#file-uploader-modal').hide(); //If your uploader is in a Bootstrap modal, hide it by applying Display none on the Modal.
        $('#file-uploader-modal').modal('hide'); //By closing modal programmatically. 
        $('#file-uploader-modal #btn-close').trigger('click');  // By triggering Modal's close button (give an ID to call it)
    }
});

根据您的需要，在容器或模式上应用脚本。希望它能解决你的问题。

单击按钮 'Save' 关闭 Dropzone

Close Dropzone on button 'Save' click

javascript

dropzone.js