Question

使用dropzone.js进行拖放文件上传，我想动态附加文件上传按钮。

该页面包含订单列表。当您选择订单时，它将通过Ajax调用加载并显示。我在页面加载时在document.body上实例化Dropzone，以便在选择订单之前拒绝带有友好错误消息的上传。加载订单后，会按顺序呈现上传按钮，我想将Dropzone点击处理程序附加到此动态创建的按钮。每次选择新订单时，都会重新创建该按钮。

我似乎无法弄清楚如何在创建Dropzone后设置/更改clickable Dropzone选项。

var documentDropzone = new Dropzone(document.body, {
  url: '/path/to/upload.php',
  clickable: false,
  init: function() {
    this.on('sending', function(file, xhr, formData) {
      var order_id = parseInt($('#dropzone_order_id').val(), 10);
      formData.append('order_id', order_id);
    });
  },
  accept: function(file, done) {
    if (parseInt($('#dropzone_order_id').val(), 10)) done();
    else {
      showErrorMessage('Please select an order first');
      done('error');
    }
  },
  success: function(file, response) {
    // handle response
  }
});

$(document).on('click', '.view-opener', function(event) {
  event.preventDefault();
  $('#view-order').remove();
  var view = $('<div id="view-order"></div>')
    .prependTo('#inner-container-top');
  view.load(this.href, function(){

    // This is the failing line of code. The #dropzone-click-target 
    // is a button that is loaded with this ajax call.
    // (It also contains a hidden input with #dropzone_order_id 
    // which enables the upload functionality.)
    Dropzone(document.body, {clickable: '#dropzone-click-target'});

  });
});

这里有一个小提琴：

http://jsfiddle.net/tomas_eklund/761qr3r5/

Answer 1

通过扫描dropzone.js源代码，我找到了一个未记录的destroy()方法。将此与可重用的选项对象结合使用，我现在正在为每个新加载的订单销毁并重新创建Dropzone。

因此，在页面加载时，我创建了这个Dropzone（除了拒绝所有上传文件外，不会上传任何内容）：

var dropzoneOptions = { clickable: false /* see Question ... */ };
var documentDropzone = new Dropzone(document.body, dropzoneOptions);

在我的“.view-opener”点击处理程序中，在加载所选订单的ajax调用之后，我添加了此代码，该代码将销毁先前的Dropzone对象，扩充选项对象并创建新的Dropzone实例： / p>

documentDropzone.destroy();
dropzoneOptions.clickable = '#dropzone-click-target';
documentDropzone = new Dropzone(document.body, dropzoneOptions);

我还更新了JS小提琴：http://jsfiddle.net/tomas_eklund/761qr3r5/39/

Dropzone.js - 如何动态附加可点击（上传按钮）

1 个答案: