javascript - 想使用 dropzone.js 创建多个 dropzones

Question

我正在制作一个比较应用，它有两个不同的拖放区域。每个都应该像一个单独的拖放区(用于替换或删除每个图像)。

问题:

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

但是dropzone抛出异常

Dropzone already attached.

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

有什么方法可以使用 Dropzone 实现上述功能？

Answer 1

太棒了!我会把它留在这里以防有人需要它。

假设您有这样的拖放区:

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

为每个拖放区定义一个类，随意调用它们。在这种情况下，它们被称为 js-dropzone-upload。

通过 forEach 遍历它们，然后将“元素”参数传递给 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, "");
                            });
                    });
            });