以编程方式添加图像时未触发 Dropzone "addedfile"

Question

我想将 checkbox 添加到 dropzone 图片，这样我就可以只上传选定的图片。当触发 addedfile 事件时，我将在每个图像旁边添加一个 checkbox。

我正在使用以下方法programmatically add images to dropzone:

var mockFile = { name: "image.jpg", size: 12345 };
imgUrl = "http://example.com/image.jpg"
myDropzone.options.addedfile.call(myDropzone, mockFile);
myDropzone.options.thumbnail.call(myDropzone, mockFile, imgUrl);

问题是 "addedfile" 事件不会为以这种方式添加的图像触发：

myDropzone.on("addedfile", function(file) {
    console.log("file added!"); // this line is never printed
});

但如果通过手动单击 dropzone 并选择文件来添加图像，则会触发上述事件。为什么在第一种情况下没有触发此事件？

Answer 1

我遇到了同样的问题，并从@enyo 找到了答案： https://github.com/enyo/dropzone/issues/209

基本上 addedfile.call 有点笨拙，您需要将此行替换为以下内容：

myDropzone.emit("addedfile", file);

这样就可以正确调用 "addedfile" 函数了。

干杯

Answer 2

根据 dropzone documentation：触发 addedfile 事件的正确方法是在实例化 dropzone 时在 init 部分调用它。

示例：

   Dropzone.options.myAwesomeDropzone = {
      init: function() {
       this.on("addedfile", function(file) { alert("Added file."); });
      }
   };

Answer 3

必须调用 myDropzone.options.addedfile.call(myDropzone, mockFile);在声明 "addedfile" 回调之后。

Answer 4

不要做我做的事并尝试监听 addedFile 事件而不是 addedfile (d'oh)。

以编程方式添加图像时未触发 Dropzone "addedfile"

Dropzone "addedfile" is not fired when adding images programatically

javascript

jquery

dom-events

dropzone.js