html - Bootstrap 模式中断流和样式中的 Dropzone.js

Question

我正在使用 Dropzone.js插件(通过ajax和拖放效果发送文件到服务器的功能)问题是它打破了流的所有形式(其中包含其他基本字段作为输入文本/密码)已经尝试在div中封装标签，添加文件上传区域的最大大小，但没有任何效果。

I am using only the JS and CSS provided by jquery, bootstrap and dropzone (and the shipping configuration).

我在 Github 上添加了具有此问题的完整示例元素

标签头中的脚本

<link rel="stylesheet" href="library/Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="library/dropzone/dropzone.css">
<link rel="stylesheet" href="assets/css/main.css">
<script defer src="library/jquery-1.11.1/jquery-1.11.1.min.js"></script>
<script defer src="library/Bootstrap/js/bootstrap.min.js"></script>
<script defer src="library/dropzone/dropzone.js"></script>
<script defer src="assets/js/main.js"></script>

引导模式:

    <div class="modal fade" id="add-product-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <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 span7 text-center" id="myModalLabel">Add Product</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal dropzone" id="add-product-form" action="#" method="post">
                        <div class="dropzone-previews"></div> <!-- this is were the previews should be shown. -->
                        <div class="form-group">
                            <label for="input_email" class="control-label col-md-3">Your Email (login)</label>
                            <div class="col-md-9">
                                <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="input_password" class="control-label col-md-3">Password</label>
                            <div class="col-md-9">
                                <input type="password" class="form-control" id="pass" name="pass" placeholder="Password">
                            </div>
                        </div>
                        <div class="checkbox text-center">
                            <label><input type="checkbox" id="remember_me" name="remember_me">Remember me on this computer</label>
                        </div>
                        <div class="form-group text-center">
                            <div class="col-md-6 col-md-offset-3">
                                <button type="reset" class="btn btn-danger">Reset</button>
                                <button type="submit" class="btn btn-info">Login</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

实际模态:

应该是这样的:

Answer 1

一个简单的解决方案是在表单中使用一个 div 元素作为拖放区，下面是 modal-body 的样子。

html:

<div class="modal-body">
  <form class="form-horizontal" id="add-product-form" action="#" method="post">
    <div id="myDropzone" class="dropzone"></div> <!-- This is the dropzone element -->
    <div class="form-group">
      <label for="input_email" class="control-label col-md-3">Your Email (login)</label>
      <div class="col-md-9">
        <input type="email" class="form-control" id="email" name="email" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label for="input_password" class="control-label col-md-3">Password</label>
      <div class="col-md-9">
        <input type="password" class="form-control" id="pass" name="pass" placeholder="Password">
      </div>
    </div>
    <div class="checkbox text-center">
      <label>
        <input type="checkbox" id="remember_me" name="remember_me">Remember me on this computer</label>
    </div>
    <div class="form-group text-center">
      <div class="col-md-6 col-md-offset-3">
        <button type="reset" class="btn btn-danger">Reset</button>
        <button type="submit" class="btn btn-info">Login</button>
      </div>
    </div>
  </form>
</div>

然后因为您正在为您的 dropzone 元素使用 div，您需要在 dropzone 配置中指定 url:

js:

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDropzone", { url: "#"});