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

Question

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

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

clickable在创建Dropzone之后,我似乎无法弄清楚如何设置/更改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实例:

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

我还更新了JS Fiddle:http://jsfiddle.net/tomas_eklund/761qr3r5/39/