带引导模式的拖放区答案

【问题标题】：drop zone with bootstrap modal带引导模式的拖放区
【发布时间】：2015-10-31 04:44:38
【问题描述】：

我正在尝试在引导模式中获取放置区 js，我可以将文件拖到上面，但复选标记和取消按钮是灰色的

下面是我的代码

<!-- UPLOAD MODAL START -->
    <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="uploadModal"><span class="glyphicon glyphicon-cloud-upload"></span> Upload a Forecast File</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">

                <form method="post" id="uploadFile" action="" enctype="multipart/form-data">

                    <div style="height: 200px; width: 200px; border: 1px">

                        drag file here...

                    </div>

                    <input type="button" class="btn btn-primary" id="submitFile" name="submitFile" value="Submit"/>

                </form>

            </div>
          </div>
        </div>
      </div> 
    </div>
<!-- UPLOAD MODAL END -->
    <script src="js/dropzone.js"></script>

    <script>

    Dropzone.autoDiscover = false;

    $(document).on('click','#uploadMod',function(){
        var myDropzone = new Dropzone("form#uploadFile", { url: "upload.php", autoProcessQueue: false});
        });
    $('#submitFile').click(function(){
        var form = $(this).closest('#uploadFile');
                    if (form.valid() == true) { 
                        if (myDropzone.getQueuedFiles().length > 0) {                        
                            myDropzone.processQueue();  
                        } else {                       
                            myDropzone.uploadFiles([]); //send empty 
                        }                                    
                    }               
    });

</script>

并且 dropzone css 文件也包含在标题部分中。以前有人遇到过这个问题吗？

【问题讨论】：

您在事件处理程序中声明myDropzone，然后尝试在另一个事件处理程序中访问它。它应该在全局范围内声明。
那么我该怎么做，因为我必须在 click uploadmod 事件上声明放置区，否则由于引导程序的一些问题它无法正常工作

标签： jquery twitter-bootstrap dropzone.js

【解决方案1】：

<form method="post" id="uploadFile" class="dropzone" action=""
 enctype="multipart/form-data">
    <div style="height: 200px; width: 200px; border: 1px">             
    </div>
    <input type="button" class="btn btn-primary" id="submitFile" name="submitFile" value="Submit"/>
</form>

我认为你应该在表单标签中添加class="dropzone"。

<form method="post" id="uploadFile" **class="dropzone"** action="" enctype="multipart/form-data"> 
    <div style="height: 200px; width: 200px; border: 1px">  
         drag file here...   
    </div>   
    <input type="button" class="btn btn-primary" id="submitFile" name="submitFile" value="Submit"/>

</form>

【讨论】：