Question

目前我已经实例化了我唯一的dropzone：

$(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');
        }
    });
});

我是这样做的，因为我想使用＆＃39;发送＆＃39;用于将其他数据发送到PHP文件的选项。

这很好用，但是当我想要实例化另一个dropzone时，它不会显示任何内容。对于第二个，我也想发送其他数据，所以我可能必须找到一个与第一个相同的解决方案。

只需创建另一个Dropzone对象

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

在另一个

中

$(function () { }

不起作用。

Answer 1

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

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 - 在同一页面上创建两个实例

1 个答案: