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

Question

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

我只使用 jquery 提供的 JS 和 CSS，bootstrap 和 dropzone（和运输配置）。

我在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 元素作为 dropzone，这就是 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>

那么由于您使用div 作为您的 dropzone 元素，您需要在 dropzone 配置中指定 url：

js:

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