web-dev-qa-db-ja.com

Dropzone.js-サーバーからファイルを削除する方法？

Dropzone.jsを使用しています。ファイルを削除しようとすると、サムネイルのみが削除されますが、サーバーからのファイルは削除されません。私はいくつかの方法を試しましたが、サーバー側の名前ではなく、クライアント側にあるイメージの名前を取得するだけです（両方の名前が異なり、暗号化された形式で名前を保存しています）。

どんな助けでも大歓迎です。

javascriptjquerydropzone.js
9
Grish

これを処理する方法は、各ファイルがアップロードされてサーバーに保存された後、サーバーにファイルに付けた名前をエコーバックし、次のような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]));
}
15
FunkeDope

別の方法、

サーバーからresponseをJSON形式またはプレーン文字列で取得します（その後、response.pathではなくresponseのみを使用します）。

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によって削除されます。

18
Harsh Vakharia

最も簡単な方法

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); 
?>
6
yogesh singh

[削除]ボタンをクリックすると、ファイルが削除されます。

これをJSファイルまたはHTMLファイル（またはPHP view/action file））に配置します。

<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このコードをPHPファイルに入れます：

<?php
     $toDelete= $_POST['filetodelete'];
     unlink("{$_SERVER['DOCUMENT_ROOT']}/*this-is-the-folder-which-you-put-the-file-uploaded*/{$toDelete}");
     die;
?>

これがあなたの仲間に役立つことを願っています:)

2
Raymond
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);
        }
2
Karthiga

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},
]}
1
Dards

ファイルオブジェクトに新しいプロパティ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) {
            }
        });
    }
1
Supervision

そこからアップロードで画像を保存すると、新しいファイル名を返す必要があります：

echo json_encode（array（ "Filename" => "New File Name"））;

そしてdropzone.jsファイルで：

成功：function（file、response）{

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

これで新しい画像ファイルを受け取り、サーバーから削除できます

1
Hardik Deliwala

このシンプルなソリューションは、単一ファイルのアップロードで機能し、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}
    });
}
0
Tom Toms

私の場合、サーバーは特定の画像ごとに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投稿を送信して、上記のRemovedfileイベントによってサーバー上のファイルを削除するために使用されました。

0
aiho