如何修复Dropzone.js中上传区域内拖拽复制文件的问题

上传图片后，在Dropzone区域内拖拽会触发文件复制，导致重复添加文件，以下是具体修复方案：

现有代码 #

$("div.dropzone").dropzone({           
      url: "test",
      method: 'POST',
      params : {
        'campaignId' : $('input[name=leadsource]').val(),
        'contactId': $('input[name=EmailAddress]').val(),
        'createDt' : toStringByFormatting(new Date(),'')+'_'+getCurrentDate() 
      },
      autoProcessQueue: false, 
      clickable: true, 
      createImageThumbnails: true, 

      maxFiles: 10, 
      maxFilesize: 100, 
      paramName: function() { return 'image'; }, 
      parallelUploads: 10, 
      uploadMultiple: true, 
      timeout: 300000,  
      thumbnailHeight: 60,        // 上传图标尺寸
      thumbnailWidth: 60,         // 上传图标尺寸
      addRemoveLinks: true,       
      init: function () {
        // 此处添加修复逻辑
      }
});

注：原代码存在语法错误，已修正paramName配置后的多余file)。

修复方案 #

方案1：添加重复文件检测逻辑 #

在init方法中监听addedfile事件，通过文件名+文件大小双重校验判断文件是否已存在，若重复则移除新添加的文件：

init: function () {
  this.on("addedfile", function(file) {
    const isDuplicate = this.files.some(existing => 
      existing.name === file.name && existing.size === file.size
    );
    // 仅在存在重复且当前文件数大于1时移除（避免误删首次添加的文件）
    if (isDuplicate && this.files.length > 1) {
      this.removeFile(file);
    }
  });
}

方案2：阻止已存在文件的拖拽行为 #

监听dragover事件，检测到拖拽的是已存在的文件时，直接阻止默认拖拽行为：

init: function () {
  this.on("dragover", function(e) {
    const items = e.dataTransfer.items;
    for (const item of items) {
      if (item.kind === "file") {
        const file = item.getAsFile();
        const fileExists = this.files.some(existing => 
          existing.name === file.name && existing.size === file.size
        );
        if (fileExists) {
          e.preventDefault();
          return false;
        }
      }
    }
  });
}

方案3：禁用拖拽排序（若启用了相关插件） #

如果你的Dropzone集成了拖拽排序功能，直接通过配置禁用即可：

$("div.dropzone").dropzone({
  // 其他原有配置...
  sortable: false
});

内容的提问来源于stack exchange，提问作者이창민