Question

我试图在bootstrap模式中获取drop zone js我能够拖动文件但是checkmark和cancel按钮显示为灰色

下面是我的代码

<!-- 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文件也包含在标题部分中。以前有人有这个问题吗？

Answer 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>

带有自举模式的拖放区

1 个答案: