[英]How to make only the Dropzone.js Previews Div clickable and not the whole form
我必须使用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教程将普通形式与Dropzone相结合,但这只是我实际想要做的事情的一半。
有没有什么方法可以有效地使用Dropzone实现所有这些?
我一直在研究这个问题,最后偶然发现了引导页面上的答案。
关键是将clickable:
选项设置为您希望活动Dropzone区域的位置。 使用您的示例,如果您希望预览区域也是您的下拉/点击区域,请设置clickable:'#dropzonePreview',
这将使该区域处于活动状态。 如果你想在那里显示“Drop Files”图像,请使用:
<div id="dropzonePreview" class="dz-default dz-message">
<span>Drop files here to upload</span>
</div>
这允许您使用单个Dropzone表单(因此所有字段都作为一个提交),同时仍允许您指定用于删除/单击的较小区域。
但需要注意的是,不要太小,就像拖放到区域之外一样,它会在浏览器中加载图像而不是页面。
或者,您可以通过实例化Dropzone类来创建dropmatic的programmaticaly(甚至在非表单元素上) http://www.dropzonejs.com/#toc_4
您需要将dz可点击类添加到所需元素。
HTML
<div class="dropzone dz-clickable" id="myDrop">
<div class="dz-default dz-message" data-dz-message="">
<span>Drop files here to upload</span>
</div>
</div>
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;
文档说要设置选项:“clickable:true”,但......
我的问题是我在上传表单(框)中添加了可见标记。 如果您希望框中的每个点都可以单击,则不能在视图中包含任何其他可见标记,您需要将其添加到“dictDefaultMessage”选项中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.