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

Question

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

任何帮助将非常感激..

Answer 1

另一种方式，

以格式或纯字符串response从您的服务器获取（然后仅使用而不是），JSONresponseresponse.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 文件“删除.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

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

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

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

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

当您单击“删除”按钮时，该文件将被删除：

将其放在您的 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 8

您可以在 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},
]}

Answer 9

在我的情况下，服务器为每个特定图像发送回一些带有 deleteUrl 的 ajax 响应。我只是将此网址插入为“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 帖子，以通过 removefile 事件删除服务器上的文件，如上所述。

Answer 10

这个简单的解决方案适用于单个文件上传，无需 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}
    });
}