拖放区未在表单中显示自身

Dropzone not displaying itself inside form

本文关键字:显示 表单 拖放区      更新时间:2023-09-26

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

但是当我将其放入表单中时,我的放置区(预览容器)没有显示自己。

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

脚本

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

看起来像 dropzone.js 仅在div id 位于类放置区内时才检测它的驼化版本。

修复

.HTML

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

请注意,我有类拖放区和 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
  }
});

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