Javascript Dropzone:防止上载重复文件
我正在使用Dropzone。我想阻止上传Dropzone“panel”中已经存在的缩略图文件。对于上传,我的意思是不允许相同名称的文件在面板中显示两次。我不关心服务器中已经存在的文件,而不显示在面板中,因为它将被具有相同名称的新文件替换 尽管我付出了努力,但我找不到如何实现这一目标。谢谢你的帮助Javascript Dropzone:防止上载重复文件,javascript,php,Javascript,Php,我正在使用Dropzone。我想阻止上传Dropzone“panel”中已经存在的缩略图文件。对于上传,我的意思是不允许相同名称的文件在面板中显示两次。我不关心服务器中已经存在的文件,而不显示在面板中,因为它将被具有相同名称的新文件替换 尽管我付出了努力,但我找不到如何实现这一目标。谢谢你的帮助 非常感谢我正在从服务器检查文件是否重复,然后将错误返回到dropzone,请参见以下内容: $targetPath = '/tmp/my_dropzone_files'; $image_name =
非常感谢我正在从服务器检查文件是否重复,然后将错误返回到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);
}
添加以下简单的代码行:
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);
}
}
}
});
myDropzone.on(“addedfile”,函数(文件){
if(this.files.length){
变量i,_len;
对于(_i=0,_len=this.files.length;_i<_len-1;_i++)/1,排除当前文件
{
如果(this.files[\u i].name==file.name&&this.files[\u i].size==file.size&&this.files[\u i].lastModifiedDate.toString()==file.lastModifiedDate.toString())
{
此.removeFile(文件);
}
}
}
});
以下是我想到的解决方案: 在Dropzone初始化中添加这两个选项
dictDuplicateFile: "Duplicate Files Cannot Be Uploaded",
preventDuplicates: true,
然后再添加一个原型函数,并在dropzone初始化上方重新实现dropzoneaddFile
prototype函数,如下所示:
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));
};
Dropzone.prototype.isFileExist=函数(文件){
var i;
如果(this.files.length>0){
对于(i=0;i
如果需要,还可以修改drozone文件。以下解决方案对我有所帮助:
this.on('addedfile', function(file) {
setTimeout(function() {
$(".dz-file-preview").remove(); // removes all files except images
}, 3000);
});
抱歉,将无法对@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;
}
}
}
});
myDropzone.on(“addedfile”,函数(文件){
if(this.files.length){
var _i,_len=this.files.length;
用于(_i=0;_i<_len-1;_i++)/1以排除当前文件
{
if(this.files[\u i].name==file.name&&this.files[\u i].size==file.size&&this.files[\u i].lastModifiedDate.toString()==
文件.lastModifiedDate.toString())
{
此.removeFile(文件);
打破
}
}
}
});
是,但文件已位于服务器上。。。所以最好阻止它被上传。试试这个。我最近也有类似的问题。我就是靠这个来完成的。这里可能重复:如果上传量很大,这将是一个问题,因为我们必须先上传整个文件,然后检查它。相反,在上传开始之前应该检查它。检查它的工作情况,我只是想删除它,除非我看到它的
假
,并且应该是真