我正在使用Dropzone。我想阻止上传已经存在于Dropzone“面板”中的缩略图文件。上传的意思是不允许相同名称的文件在面板中显示两次。我不关心服务器中已经存在的文件没有显示在面板中的情况,因为它将被相同名称的新文件替换。尽管我很努力,但我还是找不到办法。我很感激你的帮助。非常感谢您的光临
mklgxw1f1#
添加以下简单的代码行:
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); } } } });
brtdzjyr2#
下面是我得出的解决方案:
在Dropzone初始化中添加这两个选项
dictDuplicateFile: "Duplicate Files Cannot Be Uploaded", preventDuplicates: true,
并在dropzone初始化之上再添加一个原型函数,重新实现dropzone addFile原型函数,如下所示:
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文件。
3duebb1j3#
我从服务器检查文件是否重复,然后返回错误到dropzone,见下面:
$targetPath = '/tmp/my_dropzone_files'; $image_name = $_FILES['file']['name']; $targetFile = $targetPath . '/' . $image_name; $file_exists = file_exists ( $targetFile ); if( !$file_exists ) //If file does not exists then upload { move_uploaded_file( $tempFile, $targetFile ); } else //If file exists then echo the error and set a http error response { echo 'Error: Duplicate file name, please change it!'; http_response_code(404); }
f3temu5u4#
抱歉,无法对@Luca的回答添加评论。需要中断循环,以防止添加多个重复文件时可能出现的问题。
myDropzone.on("addedfile", function(file) { if (this.files.length) { var _i, _len = this.files.length; for (_i = 0; _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); break; } } } });
vd2z7a6w5#
我不敢相信8年多过去了,这个问题仍然存在。Manish Jangir有一个很好的解决方案来覆盖addFile函数。但是,它可以做得更好。我覆盖了addFile函数,但做了最少的工作,并在需要时调用原始函数。我激发了一个事件,而不是“alerting”,这样用户代码就可以确定要做什么。这还可以防止创建缩略图,并防止Dropzone在将来更改该功能的工作方式时出现错误。
import Dropzone from "dropzone"; const addFile = Dropzone.prototype.addFile; Dropzone.prototype.addFile = function (file) { if (this.options.preventDuplicates && this.isFileExist(file)) { this.emit('duplicatefile', file); return; } addFile.apply(this, [file]); } Dropzone.prototype.isFileExist = function (file) { let 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; };
5lhxktic6#
以下解决方案对我有帮助:
this.on('addedfile', function(file) { setTimeout(function() { $(".dz-file-preview").remove(); // removes all files except images }, 3000); });
6条答案
按热度按时间mklgxw1f1#
添加以下简单的代码行:
brtdzjyr2#
下面是我得出的解决方案:
在Dropzone初始化中添加这两个选项
并在dropzone初始化之上再添加一个原型函数,重新实现dropzone
addFile
原型函数,如下所示:如果需要,您还可以修改drozone文件。
3duebb1j3#
我从服务器检查文件是否重复,然后返回错误到dropzone,见下面:
f3temu5u4#
抱歉,无法对@Luca的回答添加评论。
需要中断循环,以防止添加多个重复文件时可能出现的问题。
vd2z7a6w5#
我不敢相信8年多过去了,这个问题仍然存在。Manish Jangir有一个很好的解决方案来覆盖addFile函数。但是,它可以做得更好。我覆盖了addFile函数,但做了最少的工作,并在需要时调用原始函数。我激发了一个事件,而不是“alerting”,这样用户代码就可以确定要做什么。这还可以防止创建缩略图,并防止Dropzone在将来更改该功能的工作方式时出现错误。
5lhxktic6#
以下解决方案对我有帮助: