Question

我正在制作一个比较应用，它有两个不同的拖拽和放大器。掉落区域。每个应该像一个放置区域（替换或删除每个图像）。

问题：

var previewaDropzone = new Dropzone("div#previewa",{url:'/url1.json'});
var previewbDropzone = new Dropzone("div#previewb",{url:'/url2.json'});

但是dropzone抛出异常

Dropzone已经附加。

注意：我不能使用dropzone.js的模板，因为这两个区域位于不同的地方

使用Dropzone实现上述功能的任何方式？

Answer 1

来自Dropzone FAQ

我收到错误＆＃34; Dropzone已经附加。＆＃34;在创建时   悬浮窗。

这很可能是由Dropzone的自动发现功能引起的。

当Dropzone启动时，它会扫描整个文档，然后查找   dropzone类的元素。然后它创建一个实例   找到每个元素的Dropzone。如果您以后创建Dropzone   例如，你自己创建了第二个Dropzone，这会造成这种情况   错误。

所以你可以：
Turn off autoDiscover globally like this: Dropzone.autoDiscover = false;, or
Turn off autoDiscover of specific elements like this: Dropzone.options.myAwesomeDropzone = false;

You don't have to create an instance of Dropzone programmatically in most situations! It's recommended to leave autoDiscover enabled,
并在配置的init选项中配置Dropzone。

在FAQ的下方，您可以看到init()函数的示例，您可以像这样使用它：

<script>
  // previewa is the configuration for the element that has an id attribute
  // with the value previewa
  Dropzone.options.previewa = {
    init: function() {
      Dropzone.options.previewaDropzone = false;
    }
  };
</script>

Answer 2

Oof成功了！如果有人需要，我会把它留在这里。

让我们说你有这样的下拉区：

<div class="dropzone js-dropzone-upload "></div>
<div class="dropzone js-dropzone-upload "></div>

为每个dropzone定义一个类，根据需要调用它们。在这种情况下，它们被称为js-dropzone-upload。

通过forEach迭代它们然后传递＆＃34;元素＆＃34; Dropzone构造函数的参数：

    <script>
// This prevents Dropzone to autodiscover the elements, 
// allowing you to better control it.
Dropzone.autoDiscover = false;

        Array.prototype.slice.call(document.querySelectorAll('.js-dropzone-upload'))
                            .forEach(element => {
                                var myDropzone = new Dropzone(element, {
                                    url: "/Media/AjaxUpload", maxFilesize: 10, addRemoveLinks: true, maxFiles: 1,
//Omit the "headers" in case you don't need it.
                                    headers: { "__RequestVerificationToken": document.getElementsByName("__RequestVerificationToken")[1]).value }
                                });
                                myDropzone.on("success", function (response) {
                                    document.getElementById('eMediaID').value = response.xhr.response.replace(/\"/g, "");
                                });
                            });

    </script>

加成：我用Webpack和TypeScript做了这个：

 if (document.querySelector('.js-ballot-upload') !== null) {
            require(['../dropzone/dropzone-amd-module.min.js'],
            (Dropzone) => {

                Dropzone.autoDiscover = false;

                Array.prototype.slice.call(document.querySelectorAll('.js-ballot-upload'))
                    .forEach(element => {
                        console.log(element);
                        var myDropzone = new Dropzone(element,
                        {
                            url: "/Media/AjaxUpload",
                            maxFilesize: 10,
                            addRemoveLinks: true,
                            maxFiles: 1,
                            headers: {
                                "__RequestVerificationToken": (<HTMLInputElement>document
                                    .getElementsByName("__RequestVerificationToken")[1]).value
                            }
                        });
                        myDropzone.on("success",
                            function(response) {
                                (<HTMLInputElement>document.getElementById('eMediaID')).value = response.xhr.response
                                    .replace(/\"/g, "");
                            });
                    });
            });

想要使用dropzone.js创建多个dropzones

2 个答案: