如何仅使Dropzone.js预览Div可点击而不是整个表单 [英] How to make only the Dropzone.js Previews Div clickable and not the whole form
问题描述
我的dropzone代码如下所示: - >
Dropzone.options.mydropzone = {
maxFiles:1,
maxFilesize:10,/ / MB
acceptedFiles: '图像/ *',
addRemoveLinks:真实,
autoProcessQueue:假的,//用于停止自动处理上传
自动发现:假,
paramName:'prod_pic',
previewsContainer:'#dropzonePreview',//用于指定预览div
clickable:false,//使用这个但现在我不能点击预览div来显示文件select对话框
accept:function(file,done){
console.log(uploaded);
done();
//用于启用提交按钮,如果文件存在
$(#submitbtn).prop(disabled,false);
$,
init:function(){
this.on(maxfilesexceeded,function(file){
alert(一个图像文件被接受。);
this.removeFile(file);
});
var myDropzone = this;
$(#submitbtn)。on('click',function(e){
e.preventDefault();
myDropzone.processQueue();
});
$ b this.on(reset,function(file){
//用于在没有文件的情况下禁用提交按钮
$(#submitbtn).prop (disabled,true);
});
}
};
但是我只想使预览容器都可点击和拖放,我已经设置使用 previewsContainer:'#dropzonePreview'
,但不是整个表格。
我使用 clickable:false
我不能点击预览div来显示文件上传对话框,即使我拖放文件它。我不希望这种情况发生,我只是希望预览容器拖动和可点击,但同时如果我点击提交整个表单必须上传。
我已经阅读了这个dropzone教程 Combine与Dropzone的正常形式,但这只是我真正想要做的一半。
有没有什么办法可以使用Dropzone有效地实现所有这些? 。
我一直在研究这个问题,最后偶然发现了bootstrap 页面。
关键是将可点击:
选项设置为您希望活动的Dropzone区域的位置。使用你的例子,如果你希望你的预览区域也是你的下拉/点击区域,请设置 clickable:'#dropzonePreview',
,这将使该区域处于活动状态。如果你想在这里显示Drop Files图片,请使用下面的代码:
< div id =dropzonePreviewclass =dz-default dz-message>
< span>将文件放在这里上传< / span>
< / div>
这允许您使用单一的Dropzone表单(因此所有的字段都被提交为一个)你有一个较小的区域指定滴落/点击。
但是,不要太小,就好像你拖着放在它加载的区域之外在浏览器中的图像代替页面。
I have to use dropzone.js form, which sends a couple of inputs and a file upload info to the other page.
My dropzone code looks like this -- >
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 );
});
}
};
But I want to make only the Previews container both Clickable and Drag and Drop ,which I have set by using previewsContainer: '#dropzonePreview'
, but not the whole form.
If I use clickable:false
I wont be able to click on previews div to show the file upload dialog box and also even if I drag n drop the file anywhere on the form it takes it. I dont want that to happen I just want the Previews container to be drag n drop AND Clickable but at the same time if I click on submit the whole form must get uploaded.
I have read this dropzone tutorial Combine normal form with Dropzone but thats just the half of what i actually want to do.
Is there any way we can achieve all of this using Dropzone efficiently ?.
I have been working on this as well and finally stumbled across the answer on the bootstrap page.
The key is setting the clickable:
option to wherever you want your active Dropzone area to be. Using your example, if you want your preview area to also be your drop/click area, set clickable:'#dropzonePreview',
and that will make that area active. If you want the "Drop Files" image displayed in there as well use this:
<div id="dropzonePreview" class="dz-default dz-message">
<span>Drop files here to upload</span>
</div>
This allows you to use a single Dropzone form (thus all fields get submitted as one) while still allowing you to have a smaller area designated for dropping/clicking.
One note though, don't make it too small, as if you drag and drop outside the area it loads the image in the browser in place of the page.
这篇关于如何仅使Dropzone.js预览Div可点击而不是整个表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!