Dropzone.js 在 Bootstrap 模式中断流和样式中

Question

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

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

上添加了具有此问题的完整示例项目

标签头中的脚本

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

Bootstrap 模态：

    <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: "#"});

Dropzone.js 在 Bootstrap 模式中断流和样式中

Dropzone.js inside a Bootstrap modal break flow and styling

html

css

dropzone.js