如何以编程方式分离 Dropzone？
Posted
技术标签:
【中文标题】如何以编程方式分离 Dropzone？【英文标题】：How do I detach Dropzone programmatically? 【发布时间】：2015-08-05 02:12:00 【问题描述】：我使用 Dropzone 上传文件客户端。我已经使用 JQuery 以编程方式设置了 Dropzone，我希望能够将其分离，以便用户不再上传文件。我理想的解决方案是简单地使其不可点击，然后应用默认消息向用户指示他们已超过上传次数。
这是一个简单的例子： http://www.dressorganic.co.uk/dropzone-test/turn-off-dropzone-after-load.htm
在这里，我尝试在成功事件后使其不可点击，但没有任何反应。
这是一个链接，指向我真正希望它在成功上传后的样子： http://www.dressorganic.co.uk/dropzone-test/dropzone-disabled.htm
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Turn off Dropzone after load</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/dropzone-test/dropzone/4.0.1/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="/dropzone-test/dropzone/4.0.1/dist/min/dropzone.min.css">
<script type="text/javascript">
//<![CDATA[
$(function()
$("#upload1").dropzone(
createImageThumbnails : false,
url: "/dropzone-test/handleupload.asp",
acceptedFiles : ".jpg,.jpeg,.png,.gif",
dictDefaultMessage : "Click here or drag and drop files to upload",
addRemoveLinks : false,
success : function(file)
this.removeAllFiles();
$("#upload1").dropzone(
clickable : false,
url: "/dropzone-test/handleupload.asp",
dictDefaultMessage : "You have exceeded the number of uploads, please remove existing to add more"
);
,
);
); // JQuery
//]]>
</script>
</head>
<body>
<div id="singleproductload">
<div id="upload1" class="dropzone">
</div>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：尝试使用 destroy() 方法删除和重新创建 div 容器。它使使用新参数重新初始化 Dropzone 成为可能。
var url = 'myurl',
dz
function createDrop(opt)
dz && dz.destroy()
$('#dz_container').find('div').remove()
$('<div>', 'class':'dropzone',id:'dz').appendTo($('#dz_container'))
Dropzone.options.dz = opt
dz = new Dropzone('div#dz', url: url)
createDrop(dictDefaultMessage:'new message...')
【讨论】：
【参考方案2】：见How to limit the number of dropzone.js files uploaded?。如果您要允许用户在文件达到最大值后删除文件，您不想破坏或隐藏重要的放置区元素。
【讨论】：
我实际上生成了自己的脚本，其中列出了所有上传的文件并允许您删除它们或添加标题。这就是我想禁用 Dropzone 的原因。因此，我只允许一次上传一个文件，然后删除缩略图，然后列出所有上传文件。【参考方案3】：为什么不用另一个具有相同 CSS 的 div 替换或隐藏该元素。试试remove、replaceWith、show、hide 或toggle
【讨论】：
我知道我可以做到这一点，但我想做的是分离 dropzone，然后用新参数再次附加它，这样它就变得不可点击并出现新消息。 你试过unbind、off、undelegate或die吗？以上是关于如何以编程方式分离 Dropzone？的主要内容，如果未能解决你的问题，请参考以下文章
我如何以编程方式从 kmeans 数据中建立 cv2 掩码的上限和下限