Modal內的Dropzone.js不起作用

我使用dropzone.js將文件上傳到服務器。我包含了js和css文件，「拖拽區域」在一個模式窗口內，點擊一個按鈕打開（模態包含更多元素，這裏不相關）Modal內的Dropzone.js不起作用

我面臨的問題是，在模式對話框中，「添加文件」部分不會被觸發。點擊它時沒有任何反應，我也不能拖放文件。

我在另一個線程中看到了類似問題，但提供的解決方案對我無效（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"); 
      } 
     }); 
    } 
[...]

感謝您的幫助。

來源

2016-09-21 Mahou5

您應該訂閱shown.bs.modal事件，當模式對用戶可見時觸發此事件。在這個事件中初始化Dropzone。

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

來源

2016-09-21 08:40:12

感謝您的回答，grillcsirke。（對事件的一點研究）做到了！在我的情況下，我需要在對話開放事件內初始化dropzone。 – Mahou5

Modal內的Dropzone.js不起作用

回答

相關問題