Modal内的Dropzone.js不起作用 [英] Dropzone.js inside Modal does not work

问题描述

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

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

我在另一个线程中看到了类似的问题，但在那里提供的解决方案没有工作对我来说（这里）：）。
我一直在寻找一个没有运气的日子的答案。任何想法都将受到欢迎。

这是我的代码

CSHTML：

  [...] 
< div class =W100pc> 
< div class =FormUnit W045pc AdjustedWidth> 
< div id =DropzoneElementclass =dropzone> 
< div class =dz-message>在此处添加文件< / div> 
< / div> 
< / div> 
< / div> 
 [...] 
  

JS：

  [...] 
 $（document）.ready（function（）{
 
 Dropzone.autoDiscover = false; 
 //简单的Dropzonejs 
 $（＃DropzoneElement）。dropzone（{
 maxFilesize：100，
 url：window.doSomethingHere，
 addRemoveLinks：true，
成功：函数（文件，响应）{
 var imgName = response; 
 file.previewElement.classList.add（dz-success）; 
 console.log（成功上传： + imgName）; 
}，
 error：function（file，response）{
 file.previewElement.classList.add（dz-error）; 
} 
 
 
 
 $ b code 
 $ b 
感谢您的帮助。
解决方案
您应该订阅 shown.bs.modal 事件这个事件被解雇了模式已经被用户看到了。在此事件中初始化Dropzone。
 
 $ b 
  $（'＃myModal'）。on（'shown.bs.modal'，function （e）{
 //初始化Dropzone 
}）; 
  
 
I'm using dropzone.js to upload files to the server. I included the js and css files and the "drag zone" is within a modal window that opens on the click of a button (the modal includes more elements that are not relevant here)

The problem I'm facing is that, inside the modal dialogue the "add file" section does not get triggered. Nothing happens when clicking on it, neither am I able to drag and drop files.

I saw a similar problem in another thread, but the solutions provided there didn't work for me (here: Using Dropzone.js inside Bootstrap modal).
I have been looking for an answer for days with no luck. Any ideas will be welcome.

This is my code

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");
            }
        });
    }
[...]
Thanks for your help.
解决方案
You should subscribe to the shown.bs.modal event this event is fired when the modal has been made visible to the user. Initialize the Dropzone in this event.
$('#myModal').on('shown.bs.modal', function (e) {
  // Initialize Dropzone
});


                        
这篇关于Modal内的Dropzone.js不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！