javascript Dropzone 不在表单内显示自己

Dropzone not displaying itself inside form

提问by Kristjan Kirpu

I'm trying to have a form with inputs and an image/file uploader so it gets all uploaded once I press submit button.

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

But my dropzone (previewsContainer) is not displaying itself when I put it inside a form.

但是当我将它放在表单中时，我的 dropzone (previewsContainer) 并没有显示出来。

HTML

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>

回答by Kristjan Kirpu

Seems like dropzone.js detects the camelized version of the div id only when it's inside the class dropzone.

似乎 dropzone.js 只有在类 dropzone 内时才会检测到 div id 的骆驼化版本。

Fix

使固定

HTML

HTML

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

Notice that I've class dropzone and id my-awesome-dropzone.

请注意，我已经将 dropzone 和 id my-awesome-dropzone 分类。

JS

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
  }

});

This now works. The code in my question needs to be redone a little bit, but I've decided to take another approach that would work too so I've shortened the code.

这现在有效。我的问题中的代码需要稍微重做，但我决定采用另一种也可行的方法，因此我缩短了代码。