Question

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

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

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

标记头中的脚本

<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元素作为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: "#"});

Bootstrap模式中的Dropzone.js打破了流程和样式

1 个答案: