javascript - 在 dropzone.js 中获取图像名称(和其他文件属性)onclick

Question

在dropzone.js上传所有图片后，如何在点击其中一张时获取文件名？

http://runnable.com/me/VN-nEtJXQqlk07H4

Answer 1

您可以在任何带有 file.previewElement 的事件中访问文件预览的 HTML 并绑定(bind)“onclick”事件监听器。

在类似情况下，这对我有用:

Dropzone.options.myAwesomeDropzone = {
  init: function() {
        this.on("thumbnail", function(file) {
            console.log(file); // will send to console all available props
            file.previewElement.addEventListener("click", function() {
               alert(file.name);
            });
        });
  }
};

我正在显示来自服务器的文件，文档中推荐的 addedfile 事件没有触发，这就是我使用 thumbnail 的原因(当缩略图被添加时触发生成)。

结果(点击文件名后):

来自 documentation 的提示:

To access the preview html of a file, you can access file.previewElement. For example:

myDropzone.on("addedfile", function(file) {
  file.previewElement.addEventListener("click", function() {
    myDropzone.removeFile(file);
  });
});

其他可用的文件属性: