Modal中的Dropzone.js不起作用

Question

我正在使用dropzone.js將文件上傳到服務器。 我包含了js和css文件，“拖動區域”位於一個模式窗口內，該窗口在單擊按鈕時打開（模態包含更多與此無關的元素）

我面臨的問題是，在模態對話框中，“添加文件”部分不會被觸發。 單擊它時沒有任何反應，我也無法拖放文件。

我在另一個線程中看到了類似的問題，但是那里提供的解決方案對我不起作用（ 這里 ： 在Bootstrap模式中使用Dropzone.js ）。 我一直在尋找一個沒有運氣的日子的答案。 任何想法都將受到歡迎。

這是我的代碼

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
});