Dropzone不会在表单内部显示

Question

我正在尝试使用带有输入和图像/文件上传器的表单，以便在按下提交按钮后将其全部上传。

但是当我把它放在表单中时，我的dropzone（previewsContainer）没有显示出来。

HTML

<form action="#" class="giga-form" id="my-awesome-dropzone">
  <div class="col-md-5">
    <h5>nimetus</h5>
    <input class="form-control" type="text" required>
    <h5>tüüp</h5>
    <select class="form-control" required>
      @foreach($types as $type)
        <option value="{{$type->id}}">{{$type->name}}</option>
      @endforeach
    </select>
    <h5>aadress</h5>
    <input class="form-control" type="text">
    <h5>tellija</h5>
    <input class="form-control" type="text">
    <h5>info</h5>
    <textarea class="form-control" rows="3"></textarea>
  </div>
  <div class="col-md-6 col-md-offset-1 top-pad">
    <div class="ico-border"><i class="icon-unlock"></i></div> avalik. <a href="#"><b>Varja</b></a>
    <h5 class="top-br">pildid ja failid</h5>
    <div class="giga-table fixed thumbnails dropzone">
      <div class="dropzone-previews"></div>
    </div>
  </div>
  <button type="submit">Continue</button>
</form>

SCRIPT

{{ HTML::script("js/jquery-1.9.1.js") }}
{{ HTML::script("js/jquery-ui-1.9.2.custom.min.js") }}
{{ HTML::style('css/basic.css');}}
{{ HTML::style('css/dropzone.css');}}
{{ HTML::script('js/dropzone.js') }}
<script>
Dropzone.autoDiscover = false; // if this is true I get "URL not defined" in console.
$(document).ready(function(){
  Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
    // The configuration we've talked about above
    url: '#',
    previewsContainer: ".dropzone-previews",
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,

    // The setting up of the dropzone
    init: function() {
      var myDropzone = this;
      console.log(myDropzone); // This doesn't get logged when I check. <-------

      // First change the button to actually tell Dropzone to process the queue.
      this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
        // Make sure that the form isn't actually being sent.
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();
      });

      // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
      // of the sending event because uploadMultiple is set to true.
      this.on("sendingmultiple", function() {
        // Gets triggered when the form is actually being sent.
        // Hide the success button or the complete form.
      });
      this.on("successmultiple", function(files, response) {
        // Gets triggered when the files have successfully been sent.
        // Redirect user or notify of success.
      });
      this.on("errormultiple", function(files, response) {
        // Gets triggered when there was an error sending the files.
        // Maybe show form again, and notify user of error
      });
    }

  }
});
</script>

Answer 1

看起来像dropzone.js只有当它在类dropzone内时才检测到div的版本。

修复

HTML

<div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div>

请注意，我已经使用了dropzone和id my-awesome-dropzone。

JS

$(document).ready(function(){
  Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
    // The configuration we've talked about above
    url: '#',
    previewsContainer: ".dropzone-previews",
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100
  }

});

这现在有效。 我的问题中的代码需要重做一点，但我决定采用另一种方法，这样也可以缩短代码。