点击ADD按钮动态添加多个Dropzone的实现方法咨询（代码失效）

你遇到的核心问题是：Dropzone 默认会在页面加载完成后自动扫描并初始化所有带有dropzone类的元素，但你通过点击按钮动态添加的<form>元素，不会被这个自动扫描流程覆盖，所以无法正常工作。下面是具体的实现方案：

步骤1：先禁用Dropzone的自动发现功能 #

首先要关闭自动初始化，这样我们可以完全手动控制Dropzone的创建时机：

Dropzone.autoDiscover = false;

步骤2：修改点击事件，动态创建并初始化Dropzone #

我们需要给每个动态生成的Dropzone分配唯一ID（避免重复ID导致的冲突），然后手动初始化这个新的DOM元素为Dropzone实例，同时传入你的配置选项：

完整代码示例：

<!-- HTML结构 -->
<div class="image_upload">
  <button class="add_new">ADD</button>
</div>

// 禁用自动发现
Dropzone.autoDiscover = false;

// 计数器：用来生成唯一的Dropzone ID
let dropzoneCounter = 1;

$(".image_upload .add_new").click(function(){
  // 生成唯一ID
  const uniqueDropzoneId = `singledropzone-${dropzoneCounter}`;
  dropzoneCounter++;

  // 动态创建Dropzone表单元素
  const $newDropzone = $(`
    <form action="/upload-target" class="dropzone" id="${uniqueDropzoneId}"></form>
  `);
  $(".image_upload").append($newDropzone);

  // 手动初始化Dropzone并传入配置
  new Dropzone(`#${uniqueDropzoneId}`, {
    maxFilesize: 0.5,
    dictDefaultMessage: "UPLOAD IMAGE",
    maxFiles: 1,
    clickable: true,
    thumbnailWidth: 140,
    thumbnailHeight: 140,
    maxThumbnailFilesize: 0.5,
    init: function() {
      // 这里可以添加你的自定义初始化逻辑，比如监听文件事件
      this.on("addedfile", function(file) {
        console.log("已添加文件:", file.name);
      });
    }
  });
});

为什么你的原始代码无法工作？ #

你之前的代码只是把<form>元素添加到了DOM中，但Dropzone并没有对这个新元素执行初始化流程——自动扫描只在页面加载时运行一次。通过手动调用new Dropzone()，我们可以主动告诉Dropzone：“这个新元素需要被初始化为上传组件”。

内容的提问来源于stack exchange，提问作者Ashik K H