如何只使Dropzone.js预览Div可点击而不是整个表格

我必须使用dropzone.js表单，它将一些输入和一个文件上传信息发送到另一页。

我的dropzone代码看起来像这样 – >

Dropzone.options.mydropzone = { maxFiles: 1, maxFilesize: 10, //mb acceptedFiles: 'image/*', addRemoveLinks: true, autoProcessQueue: false,// used for stopping auto processing uploads autoDiscover: false, paramName: 'prod_pic', previewsContainer: '#dropzonePreview', //used for specifying the previews div clickable: false, //used this but now i cannot click on previews div to showup the file select dialog box accept: function(file, done) { console.log("uploaded"); done(); //used for enabling the submit button if file exist $( "#submitbtn" ).prop( "disabled", false ); }, init: function() { this.on("maxfilesexceeded", function(file){ alert("No more files please!Only One image file accepted."); this.removeFile(file); }); var myDropzone = this; $("#submitbtn").on('click',function(e) { e.preventDefault(); myDropzone.processQueue(); }); this.on("reset", function (file) { //used for disabling the submit button if no file exist $( "#submitbtn" ).prop( "disabled", true ); }); } }; 

但是我想只使用Previews容器同时使用previewsContainer: '#dropzonePreview'来设置Clickable和Drag and Drop， 但不是整个表单 。

如果我使用clickable:false我将无法单击预览div来显示文件上传对话框，即使我将文件拖放到它所采用的表单上的任何位置。 我不希望这种情况发生我只想让Previews容器拖放和可点击但同时如果我点击提交，整个表单必须上传。

我已经阅读了这个dropzone教程将普通forms与Dropzone结合使用，但这只是我实际想要做的事情的一半。

有没有什么方法可以有效地使用Dropzone实现所有这些目的？

Answer 1

我一直在研究这个问题，最后在引导页面上偶然发现了答案。

关键是将clickable:选项设置为您希望活动Dropzone区域的位置。 使用您的示例，如果您希望预览区域也是您的下拉/单击区域，请设置clickable:'#dropzonePreview',这将使该区域处于活动状态。 如果你想在那里显示“Drop Files”图像，请使用：

 
 Drop files here to upload  

这允许您使用单个Dropzone表单（因此所有字段都作为一个提交），同时仍允许您指定用于删除/单击的较小区域。

但需要注意的是，不要太小，就像拖放到区域之外一样，它会在浏览器中加载图像而不是页面。

Answer 2

或者，你可以通过实例化Dropzone类来创建一个programmaticaly的dropzones（甚至在非表单元素上） http://www.dropzonejs.com/#toc_4

您需要将dz可点击类添加到所需元素。

HTML

 
 
 Drop files here to upload 
  

JavaScript的

 // Dropzone class: var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"}); // If you use jQuery, you can use the jQuery plugin Dropzone ships with: $("div#myDrop").dropzone({ url: "/file/post" }); 

注意

如果您收到控制台错误消息： Dropzone already attached ，请确保在启动新的Dropzone对象之前添加此行。

 Dropzone.autoDiscover = false; 

Answer 3

文档说要设置选项：“clickable：true”，但……

我的问题是我在上传表单（框）中添加了可见标记。 如果您希望框中的每个点都可以单击，则不能在视图中包含任何其他可见标记，您需要将其添加到“dictDefaultMessage”选项中。