DropzoneJS - 在同一页面上创建两个实例

Question

目前我已经像这样实例化了我唯一的放置区：

$(function () { // Dropzone
    Dropzone.autoDiscover = false;

    var myDropzone = new Dropzone('div#dropzone1', {
        url: '/wiki/uploadpdf', 
        acceptedFiles: 'application/pdf'});

        document.querySelector('div#dropzone1').classList.add('dropzone');

        myDropzone.on('sending', function (file, xhr, formData) {         
            formData.append('subject', 'subject1');
            formData.append('text', 'some text');
        }
    });
});

我这样做是因为我想使用 'sending' 选项将附加数据发送到 PHP 文件。

这很好用，但是当我想实例化另一个放置区时，它没有显示任何东西。对于第二个，我还想发送额外的数据，所以我可能必须找到一个解决方案来做与第一个相同的事情。

只需创建另一个 Dropzone 对象

var myDropzone = new Dropzone('div#dropzone2', { // etc }

在另一个

$(function () { }

无效。

Answer 1

如果您已经在使用 jQuery，我发现使用 jQuery 的 dropzone 插件更容易，这里是一个如何在具有不同配置的页面中拥有两个 dropzones 的示例。

html:

<form id="dropzone1" class="dropzone"></form>
<form id="dropzone2" class="dropzone"></form>

脚本：

Dropzone.autoDiscover = false;

$('#dropzone1').dropzone({
  url: '/wiki/uploadpdf', 
  acceptedFiles: 'application/pdf',
  init: function(){
    this.on("sending", function(file, xhr, formData){
        formData.append('subject', 'subject1');
        formData.append('text', 'some text');
    })
  }
});

$('#dropzone2').dropzone({
  // Here goes the configuration
  // same as on the first one but you can
  // use different values if you need to
  url: '/wiki/uploadpdf', 
  acceptedFiles: 'application/pdf',
  init: function(){
    this.on("sending", function(file, xhr, formData){
        formData.append('subject', 'subject1');
        formData.append('text', 'some text');
    })
  }
});

举个例子： http://plnkr.co/edit/UxaV9GS0ufOtDzoFhBLG?p=preview

DropzoneJS - 在同一页面上创建两个实例

DropzoneJS - create two instances on the same page

jquery

dropzone.js