拖放区：防止上传重复文件

php javascript

2022-08-30 23:13:18

我正在使用Dropzone。我想阻止上传已作为缩略图存在于Dropzone“面板”中的文件。通过上传，我的意思是不允许在面板中显示两次具有相同名称的文件。我不关心服务器中已经存在的文件并且未显示在面板中的情况，因为它将被具有相同名称的新文件替换。

尽管我付出了努力，但我找不到如何实现这一目标。感谢您的帮助。

谢谢

答案 1

添加以下简单的代码行：

myDropzone.on("addedfile", function(file) {
    if (this.files.length) {
        var _i, _len;
        for (_i = 0, _len = this.files.length; _i < _len - 1; _i++) // -1 to exclude current file
        {
            if(this.files[_i].name === file.name && this.files[_i].size === file.size && this.files[_i].lastModifiedDate.toString() === file.lastModifiedDate.toString())
            {
                this.removeFile(file);
            }
        }
    }
});

答案 2

以下是我得出的解决方案：

在 Dropzone 初始化中添加这两个选项

dictDuplicateFile: "Duplicate Files Cannot Be Uploaded",

preventDuplicates: true,

并再添加一个原型函数，并在dropzone初始化上方重新实现您的dropzone原型函数，如下所示：addFile

Dropzone.prototype.isFileExist = function(file) {
      var i;
      if(this.files.length > 0) {
        for(i = 0; i < this.files.length; i++) {
          if(this.files[i].name === file.name 
            && this.files[i].size === file.size 
            && this.files[i].lastModifiedDate.toString() === file.lastModifiedDate.toString())
           {
               return true;
           }
        }
      }
      return false;
    };

Dropzone.prototype.addFile = function(file) {
      file.upload = {
        progress: 0,
        total: file.size,
        bytesSent: 0
      };
      if (this.options.preventDuplicates && this.isFileExist(file)) {
        alert(this.options.dictDuplicateFile);
        return;
      }
      this.files.push(file);
      file.status = Dropzone.ADDED;
      this.emit("addedfile", file);
      this._enqueueThumbnail(file);
      return this.accept(file, (function(_this) {
        return function(error) {
          if (error) {
            file.accepted = false;
            _this._errorProcessing([file], error);
          } else {
            file.accepted = true;
            if (_this.options.autoQueue) {
              _this.enqueueFile(file);
            }
          }
          return _this._updateMaxFilesReachedClass();
        };
      })(this));
    };

如果需要，您还可以修改 drozone 文件。