javascript - Dropzone.js 缩略图事件

Question

我正在使用 JQuery 框架“Dropzone.js”在服务器上上传文件。

我想在缩略图显示时做一些事情。其他事情都没有问题。 DOM 在 javascript 调用之前显示。

我尝试通过两种方式启动缩略图，根据Dropzone.js documentation :

  var dz = new Dropzone(
   'div#'+id,
    {
    init: function() {
       this.on("thumbnail", function(file) {console.log("thumbnail") });
    },
...
  }

和:

var dz =  new Dropzone(...);
dz.on("thumbnail", function(file) {
    console.log("thumbnail")
  });

当我将文件拖放到拖放区时，浏览器控制台中没有显示任何内容。最奇怪的行为是，当我用事件 addedfile 写同样的东西时( dz.on("addedfile", ... 或在 init 参数中)，我有正确的行为:添加文件时我在控制台中写入了一些内容。

请注意，我想在创建缩略图时动态修改缩略图，这就是为什么我不能使用其他事件。

我使用自定义previewTemplate在我的 Dropzone 对象中；我不认为这会导致问题，但怀疑我也发布了我为此参数编写的内容:

previewTemplate : '<div class="dz-preview dz-file-preview ">'
 + '<div class="dz-details">'
   + '<div class="dz-cancel" title="Supprimer">X</div>'
   + '<div class="dz-filename"><span data-dz-name></span></div>'
   + '<div class="dz-size" data-dz-size></div>'
 + '</div>'
 + '<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span><span class="dz-upload-text" data-dz-uploadprogress></span></div>'
 + '<div class="dz-error-message"><span data-dz-errormessage></span></div>'
+ '</div>',

如果有人知道发生了什么以及我该如何解决它，我非常感谢!

评论后编辑

好的，那么，谢谢大家的评论。我想我知道我哪里误解了；更仔细地阅读文档，这就是重点:

They do stuff like: create a new HTML element, add the element when provided with image data (with the thumbnail event),

只有当我们想要在缩略图中显示图像时才会触发此事件；但我正在做的是没有图像的缩略图(只有文件名和大小)。没错，当我添加 createImageThumbnails 时标志和 <img data-dz-thumbnail />在模板中，当我在拖放区域中添加图像文件时会触发该事件。

所以，我的新问题是:创建免费图像缩略图时如何显示事件？我想使用 uploadprogress事件，但当文件未发送时(例如，激活最大文件大小限制时)不会触发。

Answer 1

我不确定您是否以正确的方式使用它。我会尝试以下方法:

var dz =  new Dropzone(...);

Dropzone.options.dz = {
 init: function() {
    this.on("thumbnail", function(file) { console.log("thumbnail") });
  }
};

如果事件按照您的预期进行，则另当别论。