我正在使用 dropzone.js。 当我尝试删除文件时，只会删除缩略图，但不会删除服务器中的文件。 我尝试了一些方法，但它只是给了我客户端图像的名称，而不是服务器端的名称（两个名称不同，以加密形式存储名称）。
任何帮助将不胜感激..
【问题讨论】：
标签： javascript jquery dropzone.js
另一种方式，
以JSON 格式或纯字符串从您的服务器获取response（然后仅使用response 而不是response.path），
dropzone.on("success", function(file, response) {
$(file.previewTemplate).append('<span class="server_file">'+response.path+'</span>');
});
这里，服务器可以返回一个这样的json，
{
status: 200,
path: "/home/user/anything.txt"
}
所以我们将这个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 } );
});
处理后，预览模板将被Dropzone删除，文件路径存储在span中。
【讨论】：
removedfile 事件删除服务器上的图像，因为当dropzone is destroyed, it calls removeAllFiles 时，服务器上的所有图像都将被销毁。 Related comment
我的处理方式是，在每个文件上传并存储在服务器上之后，我回显我在服务器上给文件的名称，并将其存储在 JS 对象中，如下所示：
PHP：
move_uploaded_file($_FILES['file']['tmp_name'], $newFileName);
echo $newFileName;
JS：
dropZone.on("success", function(file, serverFileName) {
fileList[serverFileName] = {"serverFileName" : serverFileName, "fileName" : file.name };
});
这样，您就可以在 PHP 中编写一个删除脚本，该脚本接受“serverFileName”并进行实际删除，例如：
JS：
$.ajax({
url: "upload/delete_temp_files.php",
type: "POST",
data: { "fileList" : JSON.stringify(fileList) }
});
PHP：
$fileList = json_decode($_POST['fileList']);
for($i = 0; $i < sizeof($fileList); $i++)
{
unlink(basename($fileList[$i]));
}
【讨论】：
最简单的方法
JS文件，当你点击删除按钮时这个脚本会运行
this.on("removedfile", function(file) {
alert(file.name);
$.ajax({
url: "uploads/delete.php",
type: "POST",
data: { 'name': file.name}
});
});
php 文件“delete.php”
<?php
$t= $_POST['name'];
echo $t;
unlink($t);
?>
【讨论】：
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);
}
【讨论】：
点击“删除”按钮后文件将被删除：
把它放在你的 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>
..并将此代码放入您的 PHP 文件中：
<?php
$toDelete= $_POST['filetodelete'];
unlink("{$_SERVER['DOCUMENT_ROOT']}/*this-is-the-folder-which-you-put-the-file-uploaded*/{$toDelete}");
die;
?>
希望这可以帮助你兄弟:)
【讨论】：
当您从那里保存上传的图像时，您必须返回新文件名：
echo json_encode(array("文件名" => "新文件名"));
在 dropzone.js 文件中：
成功：函数（文件，响应）{
obj = JSON.parse(response);
file.previewElement.id = obj.Filename;
if (file.previewElement) {
return file.previewElement.classList.add("dz-success");
}
},
当 dropzone 初始化时..
初始化：函数（）{
this.on("removedfile", function(file) {
var name = file.previewElement.id;
$.ajax({
url: "post URL",
type: "POST",
data: { 'name': name}
});
});
return noop;
},
现在您将收到新的图像文件，您可以将其从服务器中删除
【讨论】：
我让它变得更简单了，只是在文件对象中添加了新属性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) {
}
});
}
【讨论】：
您可以在 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);
});
}
}
});
服务器 Json 返回用于获取所有已上传的图像 /server/images:
{
"data":[
{"id":52,"name":"image_1.jpg","filesize":1234},
{"id":53,"name":"image_2.jpg","filesize":1234},
]}
【讨论】：
在我的情况下，服务器会为每个特定图像发送回一些带有 deleteUrl 的 ajax 响应。 我只是将此 url 作为“data-dz-remove”属性插入，已在 previewTemplate 中设置。
当我使用 jquery 时，它看起来是这样的：
this.on("success", function (file, response) {
$(file.previewTemplate).find('a.dz-remove').attr('data-dz-remove', response.deleteUrl);
});
后来这个 attr 用于发送带有这个 url 的 ajax 帖子，以通过删除文件事件删除服务器上的文件，如上所述。
【讨论】：
这个简单的解决方案适用于单个文件上传，无需 DOM 操作。
PHP 上传脚本
[...]
echo $filepath; // ie: 'medias/articles/m/y/a/my_article/my-image.png'
JS 拖放区
this.on("success", function(file, response) {
file.path = response; // We create a new 'path' index
});
this.on("removedfile", function(file) {
removeFile(file.path)
});
Dropzone 之外的 JS
var removeFile = function(path){
//SEND PATH IN AJAX TO PHP DELETE SCRIPT
$.ajax({
url: "uploads/delete.php",
type: "POST",
data: { 'path': path}
});
}
【讨论】：