在 jQuery 对话框中工作的 Dropzone 插件答案

【问题标题】：Dropzone plugin working inside jQuery dialog在 jQuery 对话框中工作的 Dropzone 插件
【发布时间】：2015-04-14 01:51:05
【问题描述】：

我正在尝试在 jQuery 对话框中打开 Dropzone 上传控件，它正在显示表单，但我无法在其中放置任何图像。

这是dropzone控件的代码：

<link rel="stylesheet" type="text/css" href="../../Content/dropzone.css" media="screen" />
<script type="text/javascript" src="<%= Url.Content("~/Scripts/dropzone.js") %>\"></script>
<form action='/file-upload' class='dropzone' id='my-awesome-dropzone'></form>

以及构建 jQuery 对话框的代码：

dialogObj = $("#_dialogPanel").dialog({
        autoOpen: false,
        resizeable: true,
        position: { my: "center-100 bottom-40", at: "center center" },
        stack: true,
        height: 'auto',
        width: 'auto',
        modal: true
    });

使用.html() 属性将控件分配给对话框

【问题讨论】：

小提琴会很有帮助..

标签： javascript jquery html jquery-ui-dialog dropzone.js

【解决方案1】：

你添加了吗

$('#my-awesome-dropzone').dropzone({  previewsContainer: "#_dialogPanel" //or whatever the css selector is for your preview area })

如果您正在执行大量事件和回调，我会忽略 jQuery 调用并继续：

var myAwesomeDropzone = new Dropzone("#my-awesome-dropzone", { previewsContainer: "#_dialogPanel"});

这样您就可以轻松添加诸如

之类的事件

myAwesomeDropzone.on("thumbnail", function(file,fileurl) {
    /* Add a nice green good file tick or whatever else you want to do */       
});

【讨论】：

添加dropzone参数会有什么不同？
1.通过设置新的放置区，您可以确保放置区设置正确
2.一旦你确定它正在工作，你就可以添加参数来更精细地控制呈现给用户的内容（主题）并更好地处理事件
比如我用它作为：
codevar myNewDropzone = new Dropzone("#newuploadedForm", { url: "", uploadMultiple: true, autoProcessQueue: false, addRemoveLinks: false, clickable:是的，预览模板：document.querySelector('#preview-template').innerHTML，init : function() { this.on("thumbnail", function(file,fileurl) { new_thumbnail_added(file); }); this.on ("totaluploadprogress", function(progress) { display_progress(progress); }); }); } });