Modal 中的 Dropzone.js 不起作用答案

【问题标题】：Dropzone.js inside Modal does not workModal 中的 Dropzone.js 不起作用
【发布时间】：2016-09-21 08:01:35
【问题描述】：

我正在使用 dropzone.js 将文件上传到服务器。我包含了 js 和 css 文件，“拖动区域”位于一个模式窗口中，该窗口在单击按钮时打开（模式包含更多与此处无关的元素）

我面临的问题是，在模式对话框中，“添加文件”部分没有被触发。单击它时没有任何反应，我也无法拖放文件。

我在另一个帖子中看到了类似的问题，但那里提供的解决方案对我不起作用（here:Using Dropzone.js inside Bootstrap modal）。几天来我一直在寻找答案，但没有运气。欢迎任何想法。

这是我的代码

CSHTML：

[...]
    <div class="W100pc">
        <div class="FormUnit W045pc AdjustedWidth">
            <div id="DropzoneElement" class="dropzone">
                <div class="dz-message">Add file here</div>
            </div>
        </div>
    </div>
[...]

JS：

[...]
    $(document).ready(function() {

        Dropzone.autoDiscover = false;
        //Simple Dropzonejs 
        $("#DropzoneElement").dropzone({
            maxFilesize: 100,
            url: window.doSomethingHere,
            addRemoveLinks: true,
            success: function(file, response) {
                var imgName = response;
                file.previewElement.classList.add("dz-success");
                console.log("Successfully uploaded :" + imgName);
            },
            error: function(file, response) {
                file.previewElement.classList.add("dz-error");
            }
        });
    }
[...]

感谢您的帮助。

【问题讨论】：

标签： javascript html razor

【解决方案1】：

您应该订阅shown.bs.modal 事件，当模态框对用户可见时会触发此事件。在此事件中初始化 Dropzone。

$('#myModal').on('shown.bs.modal', function (e) {
  // Initialize Dropzone
});

【讨论】：

感谢您的回答，grillcsirke。那（以及对事件的一点研究）做到了！！！就我而言，我需要在对话打开事件中初始化 dropzone。