[英]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.