Javascript 如何删除现有文件 dropzone？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35862364/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove the existing file dropzone?
提问by D.Cristi
I have this sample:
我有这个样本：
CODE HTML:
代码 HTML：
<div class="dropzone dz-clickable" id="myDrop">
<div class="dz-default dz-message" data-dz-message="">
<span>Upload or drag patient photo here</span>
</div>
</div>
CODE JS:
代码JS：
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDrop", {
addRemoveLinks: true,
url: "#",
maxFiles: 1,
init: function() {
this.on("maxfilesexceeded", function(file) {
alert("You are not allowed to chose more than 1 file!");
this.removeFile(file);
});
this.on("addedfile", function(file) {
myDropzone.options.removefile.call(myDropzone, mockFile);
// I want to delete an existing element
});
}
});
var fileName = $('#profilePicture').val();
var mockFile = {
name: fileName,
size: 12345
};
myDropzone.options.addedfile.call(myDropzone, mockFile);
myDropzone.options.thumbnail.call(myDropzone, mockFile, "https://lh3.googleusercontent.com/-eubcS91wUNg/AAAAAAAAAAI/AAAAAAAAAL0/iE1Hduvbbqc/photo.jpg?sz=104");
What I want to do is when the user uploads a file, then the existing one to be removed.
我想要做的是当用户上传文件时，然后删除现有的文件。
How can you do this correctly?
你怎么能正确地做到这一点？
Thanks in advance!
提前致谢！
回答by wong2
this is a working approach:
这是一种工作方法：
var currentFile = null;
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDrop", {
addRemoveLinks: true,
url: "#",
maxFiles:1,
init: function() {
this.on("addedfile", function(file) {
if (currentFile) {
this.removeFile(currentFile);
}
currentFile = file;
});
}
});
回答by user8052245
Try this method.
试试这个方法。
removedfile: function(file) {
file.previewElement.remove();
}
回答by Sebastian Cardona Osorio
Try this approach:
试试这个方法：
success: function (file, response) {
if (this.files.length > 1)
this.removeFile(this.files[0]);
//Do others tasks...
}
With this approach the previous item will be removed.
使用这种方法，前一项将被删除。
回答by Cold Head Skillet
Works for me , if the image is already uploaded in the dropzone , it does not allow me to add more .
对我有用，如果图像已经上传到 dropzone，它不允许我添加更多。
this.on("addedfile", function(file) {
/* Valid only in the dropzone . If a repetitive document shows ALERT and the previous item will disappear.(Sorry my English). */
if (this.files.length) {
var i, len, pre;
for (i = 0, len = this.files.length; i < len - 1; i++) {
if (this.files[i].name == file.name && this.files[i].size == file.size && this.files[i].lastModifiedDate.toString() == file.lastModifiedDate.toString()) {
alert("Doc: " + file.name + " is already registered.")
return (pre = file.previewElement) != null ? pre.parentNode.removeChild(file.previewElement) : void 0;
}
}
}
});
回答by Bashirpour
"Every your events" Like : success - error - sending - removedfile or addedfile and etc.
“每一个你的事件”比如：成功 - 错误 - 发送 - 删除文件或添加文件等。
http://www.dropzonejs.com/#event-list
http://www.dropzonejs.com/#event-list
init : function () {
self.on('Every your events', function (file, response) {
this.removeFile(file);
}
}
for remove file from out of this function can do this :
从这个函数中删除文件可以这样做：
Dropzone.forElement("div#myDrop").removeAllFiles(true);
回答by asghar
hi you can just add addRemoveLinks: true,to dropzone function and
add success function after dropzon ajax
嗨，您可以添加addRemoveLinks: true,到 dropzone 功能并在 dropzon ajax 之后添加成功功能
success:function(file,response){
file.serverId = response.id;
$(".dz-preview:last .dz-remove").attr('onclick','delete_file('+file.serverId+')');
}
in this code after success upload files comes add into last a tag from dropzone in onclick to call delete_file function and on this function you can receive id and send id to backend, find file in backend and delete files
在此代码中，成功上传文件后，将 dropzone 中的最后一个标签添加到 onclick 中以调用 delete_file 函数，在此函数中，您可以接收 id 并将 id 发送到后端，在后端查找文件并删除文件
