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")
  });

当我在dropzone中删除文件时，我的浏览器控制台中没有显示任何内容。最奇怪的行为是当我用事件addedfile（dz.on("addedfile", ...或在init参数中）编写相同的东西时，我有正确的行为：当文件存在时，我在控制台中写了一些东西加入。

请注意，我想在创建缩略图时动态修改缩略图，这就是我无法使用其他事件的原因。

我在Dropzone对象中使用自定义previewTemplate;我不认为这导致了这个问题，但是我怀疑我发布了我为这个参数写的内容：

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>',

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

评论后修改

好的，那么，谢谢大家的意见。我想我知道我误解了哪里;并且更仔细地阅读文档，这就是重点：

他们执行以下操作：创建新的HTML元素，在提供图像数据时添加元素（使用缩略图事件），

只有当我们想在缩略图中显示图像时才会触发此事件;但我正在做的是没有图像的缩略图（只是文件的名称和大小）。这是正确的，当我在模板中添加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") });
  }
};

如果事件符合预期，那么事情就是另一回事。

Dropzone.js缩略图事件

1 个答案: