Dropzone不会在窗体内显示

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

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

HTML

 
 
nimetus
  
tüüp
  @foreach($types as $type) id}}">{{$type->name}} @endforeach  
aadress
  
tellija
  
info
  
 
 
 avalik. Varja 
pildid ja failid
 
 
 
 
 Continue  

脚本

 {{ 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') }}  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 }); } } });  

Answer 1

看起来像dropzone.js只有当它在类dropzone中时才会检测div id的camelized版本。

固定

HTML

请注意，我已经使用了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 } }); 

这现在有效。 我的问题中的代码需要重做一点，但我已经决定采用另一种方法，因为我已经缩短了代码。