Question

我正在使用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");
            }
        });
    }
[...]

感谢您的帮助。

Answer 1

当用户可以看到模态时，您应该订阅此事件被触发的shown.bs.modal事件。在此事件中初始化Dropzone。

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

Modal中的Dropzone.js不起作用

1 个答案: