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

Question

使用dropzone.js对于拖放文件上传，我想动态附加一个文件上传按钮。

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

我似乎不知道如何在创建 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'});

  });
});

这里有 fiddle :

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/