我必须使用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 );
});
}
};
但是,我只想使“预览容器”只能使用“预览容器”,即“#dropzonePreview”,而不是整个表单.
如果我使用clickable：false,我将无法单击预览div来显示文件上传对话框,即使我拖动n将文件放在它所需的表单上的任何位置.我不想让这种情况发生,我只是想要预览容器拖动和下拉和可点击,但同时如果我点击提交整个表单必须上传.
我已经阅读了这个dropzone教程Combine normal form with Dropzone,但这只是我实际想要做的一半.
有没有什么办法可以实现所有这一切使用Dropzone有效？
解决方法
我一直在做这件事,最后在
bootstrap页的答案中偶然发现.
关键是将可点击：选项设置为您希望有效的Dropzone区域的任何位置.使用您的示例,如果您希望预览区域也是您的下拉/点击区域,请设置clickable：’#dropzonePreview’,这将使该区域处于活动状态.如果您想要在其中显示的“Drop Files”图像也可以使用：
<div id="dropzonePreview" class="dz-default dz-message"> <span>Drop files here to upload</span> </div>
这允许您使用单个Dropzone表单(因此所有字段都被提交为一个),同时仍允许您指定一个较小的区域进行删除/点击.
一个注意事项,不要太小,就好像拖放到浏览器中加载图像以外的区域代替页面.
