Question

我正在使用dropzone.js。当我尝试删除文件时，只会删除缩略图，但不会删除服务器中的文件。我尝试了一些方法，但它只是给了我客户端图像的名称而不是服务器端的名称（两个名称都不同，以加密形式存储名称）。

非常感谢任何帮助..

Answer 1

另一种方式，

以response格式或普通字符串从您的服务器获取JSON（然后仅使用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中存储的文件路径。

Answer 2

我处理这个问题的方法是，在每个文件上传并存储在服务器上之后，我回显我在服务器上提供文件的名称，并将其存储在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]));
}

Answer 3

最简单的方式

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); 
?>

Answer 4

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);
        }

Answer 5

单击＆＃34;删除＆＃34;将删除该文件。按钮：

将它放在您的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;
?>

希望这可以帮助你兄弟：）

Answer 6

我更容易，只是将新属性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) {
            }
        });
    }

Answer 7

您可以在模拟文件上添加上载文件的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},
]}

Answer 8

在我的情况下，服务器为每个特定图像发送一些带有deleteUrl的ajax响应。我只是将此网址插入＆＃39; data-dz-remove＆＃39;属性，已在previewTemplate中设置。

因为我使用jquery看起来如此：

this.on("success", function (file, response) {
    $(file.previewTemplate).find('a.dz-remove').attr('data-dz-remove', response.deleteUrl);
});

稍后这个attr用于发送带有此url的ajax帖子，以通过removefile事件删除服务器上的文件，如上所述。

Answer 9

这个简单的解决方案适用于单个文件上传，无需DOM操作。

PHP上传脚本

  [...]
  echo $filepath; // ie: 'medias/articles/m/y/a/my_article/my-image.png'

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)
  });

在Dropzone之外的JS

var removeFile = function(path){
   //SEND PATH IN AJAX TO PHP DELETE SCRIPT
    $.ajax({
        url: "uploads/delete.php",
        type: "POST",
        data: { 'path': path}
    });
}

Answer 10

当你从那里保存图像时，你必须返回新的文件名：

echo json_encode（array（＆＃34; Filename＆＃34; =＆gt;＆＃34; New File Name＆＃34;））;

在dropzone.js文件中：

成功：功能（文件，响应）{

    obj = JSON.parse(response);

    file.previewElement.id = obj.Filename;
    if (file.previewElement) {
      return file.previewElement.classList.add("dz-success");
    }
  },

当dropzone初始化时..

init：function（）{

    this.on("removedfile", function(file) {
      var name = file.previewElement.id;
        $.ajax({
        url: "post URL",
        type: "POST",
        data: { 'name': name}
        });


    });

    return noop;
  },

现在您将收到新的图像文件，您可以从服务器中删除它

Dropzone.js-如何从服务器删除文件？

10 个答案: