jQuery Dropzone.js- 如何从服务器删除文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17452662/
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
Dropzone.js- How to delete files from server?
提问by Grish
I am using dropzone.js. When I try to delete files only the thumbnails get deleted but not the files from server. I tried some ways but it just gives me the name of the image which was on client side and not the name on server side(both names are different, storing names in encrypted form).
我正在使用 dropzone.js。当我尝试删除文件时，只有缩略图会被删除，而不会从服务器中删除文件。我尝试了一些方法，但它只给了我客户端图像的名称，而不是服务器端的名称（两个名称不同，以加密形式存储名称）。
Any help would be much appreciated..
任何帮助将非常感激..
回答by Harsh Vakharia
Another way,
其它的办法，
Get responsefrom your server in JSONformat or a plain string (then use only responseinstead of response.path),
response从您的服务器获取JSON格式或纯字符串（然后仅使用response而不是response.path），
dropzone.on("success", function(file, response) {
$(file.previewTemplate).append('<span class="server_file">'+response.path+'</span>');
});
Here, the server can return a json like this,
在这里，服务器可以像这样返回一个json，
{
status: 200,
path: "/home/user/anything.txt"
}
So we are storing this pathinto a spanthat we can access when we are going to delete it.
所以我们将它存储path到一个span我们可以在我们要删除它时访问它。
dropzone.on("removedfile", function(file) {
var server_file = $(file.previewTemplate).children('.server_file').text();
alert(server_file);
// Do a post request and pass this path and use server-side language to delete the file
$.post("delete.php", { file_to_be_deleted: server_file } );
});
After the process, the preview template will be deleted by Dropzonealong with file path stored in a span.
完成此过程后，预览模板将Dropzone与存储在span.
回答by FunkeDope
The way I handle this, is after each file is uploaded and stored on the server, I echo back the name I give the file on my server, and store it in a JS object, something like this:
我处理这个问题的方法是，在每个文件上传并存储在服务器上之后，我在服务器上回显我给文件的名称，并将其存储在一个 JS 对象中，如下所示：
PHP:
PHP：
move_uploaded_file($_FILES['file']['tmp_name'], $newFileName);
echo $newFileName;
JS:
JS：
dropZone.on("success", function(file, serverFileName) {
fileList[serverFileName] = {"serverFileName" : serverFileName, "fileName" : file.name };
});
With this, you can then write a delete script in PHP that takes in the "serverFileName" and does the actual deletion, such as:
有了这个，您就可以在 PHP 中编写一个删除脚本，该脚本接收“serverFileName”并进行实际删除，例如：
JS:
JS：
$.ajax({
url: "upload/delete_temp_files.php",
type: "POST",
data: { "fileList" : JSON.stringify(fileList) }
});
PHP:
PHP：
$fileList = json_decode($_POST['fileList']);
for($i = 0; $i < sizeof($fileList); $i++)
{
unlink(basename($fileList[$i]));
}
回答by yogesh singh
Most simple way
最简单的方法
JS file,this script will run when you click delete button
JS 文件，当您单击删除按钮时将运行此脚本
this.on("removedfile", function(file) {
alert(file.name);
$.ajax({
url: "uploads/delete.php",
type: "POST",
data: { 'name': file.name}
});
});
php file "delete.php"
php 文件“delete.php”
<?php
$t= $_POST['name'];
echo $t;
unlink($t);
?>
回答by Karthiga
success: function(file, serverFileName)
{
fileList['serverFileName'] = {"serverFileName" : serverFileName, "fileName" : file.name };
alert(file.name);
alert(serverFileName);
},
removedfile: function(file, serverFileName)
{
fileList['serverFileName'] = {"serverFileName" : serverFileName, "fileName" : file.name };
alert(file.name);
alert(serverFileName);
}
回答by Raymond
The file will be deleteed when you click the "Remove" button :
当您单击“删除”按钮时，文件将被删除：
Put this on your JS file or your HTML file (or your PHP view/action file):
将其放在您的 JS 文件或 HTML 文件（或您的 PHP 视图/操作文件）中：
<script type="text/javascript">
Dropzone.options.myAwesomeDropzone = {
// Change following configuration below as you need there bro
autoProcessQueue: true,
uploadMultiple: true,
parallelUploads: 2,
maxFiles: 10,
maxFilesize: 5,
addRemoveLinks: true,
dictRemoveFile: "Remove",
dictDefaultMessage: "<h3 class='sbold'>Drop files here or click to upload document(s)<h3>",
acceptedFiles: ".xls,.xlsx,.doc,.docx",
//another of your configurations..and so on...and so on...
init: function() {
this.on("removedfile", function(file) {
alert("Delete this file?");
$.ajax({
url: '/delete.php?filetodelete='+file.name,
type: "POST",
data: { 'filetodelete': file.name}
});
});
}}
</script>
..and Put this code in your PHP file :
..并将此代码放入您的 PHP 文件中：
<?php
$toDelete= $_POST['filetodelete'];
unlink("{$_SERVER['DOCUMENT_ROOT']}/*this-is-the-folder-which-you-put-the-file-uploaded*/{$toDelete}");
die;
?>
Hope this helps you bro :)
希望这对你有帮助兄弟:)
回答by Hardik Deliwala
When you save the image in upload from there you have to return new file name :
当您从那里保存图像上传时，您必须返回新文件名：
echo json_encode(array("Filename" => "New File Name"));
echo json_encode(array("文件名" => "新文件名"));
And in dropzone.js file :
在 dropzone.js 文件中：
success: function(file,response) {
成功：功能（文件，响应）{
obj = JSON.parse(response);
file.previewElement.id = obj.Filename;
if (file.previewElement) {
return file.previewElement.classList.add("dz-success");
}
},
And when the dropzone is initialize..
当 dropzone 初始化时..
init: function() {
初始化：函数（）{
this.on("removedfile", function(file) {
var name = file.previewElement.id;
$.ajax({
url: "post URL",
type: "POST",
data: { 'name': name}
});
});
return noop;
},
Now you will receive new image file and you can delete it from server
现在您将收到新的图像文件，您可以将其从服务器中删除
回答by Dards
You can add id number of uploaded file on the mockFile and use that id to delete from server.
您可以在 mockFile 上添加上传文件的 id 号，并使用该 id 从服务器中删除。
Dropzone.options.frmFilesDropzone = {
init: function() {
var _this = this;
this.on("removedfile", function(file) {
console.log(file.id); // use file.id to delete file on the server
});
$.ajax({
type: "GET",
url: "/server/images",
success: function(response) {
if(response.status=="ok"){
$.each(response.data, function(key,value) {
var mockFile = {id:value.id,name: value.name, size: value.filesize};
_this.options.addedfile.call(_this, mockFile);
_this.options.thumbnail.call(_this, mockFile, "/media/images/"+value.name);
_this.options.complete.call(_this, mockFile);
_this.options.success.call(_this, mockFile);
});
}
}
});
Server Json return for getting all images already uploaded /server/images:
服务器 Json 返回获取已上传的所有图像 /server/images：
{
"data":[
{"id":52,"name":"image_1.jpg","filesize":1234},
{"id":53,"name":"image_2.jpg","filesize":1234},
]}
回答by Supervision
I've made it easier, just added new property serverFileNameto the file object:
我让它更容易了，只是向serverFileName文件对象添加了新属性：
success: function(file, response) {
file.serverFileName = response.file_name;
},
removedfile: function (file, data) {
$.ajax({
type:'POST',
url:'/deleteFile',
data : {"file_name" : file.serverFileName},
success : function (data) {
}
});
}
回答by igolkotek
In my case server sends back some ajax response with deleteUrl for every specific image. I just insert this url as 'data-dz-remove' attribute, set in previewTemplate already.
在我的情况下，服务器为每个特定图像发回一些带有 deleteUrl 的 ajax 响应。我只是将这个 url 作为 'data-dz-remove' 属性插入，已经在 previewTemplate 中设置。
As I use jquery it looks so:
当我使用 jquery 时，它看起来是这样的：
this.on("success", function (file, response) {
$(file.previewTemplate).find('a.dz-remove').attr('data-dz-remove', response.deleteUrl);
});
Later this attr used to send ajax post with this url to delete file on server by removedfile event as mentioned above.
后来这个attr用来发送带有这个url的ajax帖子，以通过上面提到的removedfile事件删除服务器上的文件。
回答by Tom Tom
This simple solution will work for single files upload, no need for DOM manipulation.
这个简单的解决方案适用于单个文件上传，不需要 DOM 操作。
PHP Upload Script
PHP上传脚本
[...]
echo $filepath; // ie: 'medias/articles/m/y/a/my_article/my-image.png'
JS Dropzones
JS Dropzones
this.on("success", function(file, response) {
file.path = response; // We create a new 'path' index
});
this.on("removedfile", function(file) {
removeFile(file.path)
});
JS outside of Dropzone
Dropzone 之外的 JS
var removeFile = function(path){
//SEND PATH IN AJAX TO PHP DELETE SCRIPT
$.ajax({
url: "uploads/delete.php",
type: "POST",
data: { 'path': path}
});
}
