dropzoneプラグインでremovefileオプションを追加する方法は？

Question

私はdropzone.js（http://www.dropzonejs.com/）を使用しました。削除ボタンを追加して画像を削除しようとしています。しかし、私はあなたが適切な方法でdropzoneを設定していないと思うjavascriptの未定義エラー

<script> 
    Dropzone.options.myDropzone = { 
init: function() { 
addRemoveLinks: true, 
thisDropzone = this; 
$.get('photo-add.php', function(data) { 
$.each(data, function(key,value){ 
var mockFile = { name: value.name, size: value.size }; 
    thisDropzone.options.addedfile.call(thisDropzone, mockFile); 
thisDropzone.options.thumbnail.call(thisDropzone, mockFile,  "upload/"+value.name); 

}); 
}); 

this.on("removedfile", function(file) { 
alert(file.name); 
console.log(file); 
    // Create the remove button 
    var removeButton = Dropzone.createElement("<button>Remove file</button>"); 

//Capture the Dropzone instance as closure. 
    var _this = this; 

// Listen to the click event 
removeButton.addEventListener(); 

    // Add the button to the file preview element. 
    file.previewElement.appendChild(removeButton); 
    }); 
    } 
    }; 
    </script> 

Answer 1

を取得しています。

init: function() { 
addRemoveLinks: true, 

上記のコードは無効です。また、あなたは、ファイルを削除するイベントを処理したい場合は、この

removedfile: function(file) { 
    x = confirm('Do you want to delete?'); 
    if(!x) return false; 
} 

ハンドルのように使用することができますthis.addRemoveLinks = true

のように使用することができ、この

Dropzone.options.myAwesomeDropzone = { 
    addRemoveLinks: true, 
    init: function() { 

    } 

    ... 

}; 

か、他のような

使用サーバー側のファイルの削除。ドロップゾーンの成功法上の

は、例えば、配列にファイル名をプッシュ：file_up_names=[];

success:function(file){ 
    file_up_names.push(file.name); 

今の名前を取得し、ファイル削除のためのPHPページに渡す削除します。

removedfile: function(file) { 

    x = confirm('Do you want to delete?'); 
    if(!x) return false; 
    for(var i=0;i<file_up_names.length;++i){ 

     if(file_up_names[i]==file.name) { 

     $.post('delete_file.php',file_name:file_up_names[i]},function(data,status){ 
      alert('file deleted'); 
     }); 
    } 

また、サーバー側でファイル名を変更した場合は、削除するファイル名を取り戻す必要があります。

Answer 2

コードの下に試してみてください。

Dropzone.autoDiscover = false; 
var acceptedFileTypes = "image/*"; //dropzone requires this param be a comma separated list 
var fileList = new Array; 
var i = 0; 
$("#dropzone").dropzone({ 
    addRemoveLinks: true, 
    maxFiles: 10, //change limit as per your requirements 
    dictMaxFilesExceeded: "Maximum upload limit reached", 
    acceptedFiles: acceptedFileTypes, 
    dictInvalidFileType: "upload only JPG/PNG", 
    init: function() { 

     // Hack: Add the dropzone class to the element 
     $(this.element).addClass("dropzone"); 

     this.on("success", function (file, serverFileName) { 
      fileList[i] = { 
       "serverFileName": serverFileName, 
       "fileName": file.name, 
       "fileId": i 
      }; 
      $('.dz-message').show(); 
      i += 1; 
     }); 
     this.on("removedfile", function (file) { 
      var rmvFile = ""; 
      for (var f = 0; f < fileList.length; f++) { 
       if (fileList[f].fileName == file.name) { 
        rmvFile = fileList[f].serverFileName; 
       } 
      } 

      if (rmvFile) { 
       $.ajax({ 
        url: path, //your php file path to remove specified image 
        type: "POST", 
        data: { 
         filenamenew: rmvFile, 
         type: 'delete', 
        }, 
       }); 
      } 
     }); 

    } 
}); 

Answer 3

私はこの同じ問題に出くわしました。私はDhavalの答えが助けになると思っていましたが、私はドキュメントからよりクリーンな方法を見つけました。ドキュメントから

：

あなたが（代わりにaddRemoveLinksの設定で構築された の）ファイルを削除するには、いくつかの特定のリンクをしたい場合、あなたは、単にデータdz-で テンプレート内の要素を挿入することができます属性を削除します。例：

<img src="removebutton.png" alt="Click me to remove the file." 
> data-dz-remove /> 

私は私のプレビューテンプレートにボタン上のこの同じ属性をテストし、必要に応じてそれが働きました。

Answer 4

サーバー側

uploadFile

保存ファイルとは、データベース上のファイル情報、 エコーデータベース・テーブル・ファイルのIDまたはを保存することを決定した場合は、ディスク上のファイルを保存することにした場合 のみ、ファイルの新しい名前をエコーし​​ます。

REMOVEFILE

IDや名前のファイルを削除し、その上に指定した名前を使用してPOSTの変数$ _POST [ "FID"]または から受け取りました。

JavascriptをjQueryの

fileList = new Array(); 
$("#fm-dropzone").dropzone({ 
    url: siteurl, 
    addRemoveLinks: true, 
    dictRemoveFileConfirmation: "Are you sure you want to remove this File?",  
    success: function(file, serverFileName) { 
      fileList[file.name] = {"fid" : serverFileName }; 
      }, 
    removedfile: function(file) { 
      $.post(siteurl + "/removeFile", fid:fileList[file.name].fid}).done(function() { 
        file.previewElement.remove(); 
       }); 
      } 
}); 

Answer 5

"すべてのあなたのイベント" と同様：成功 - エラー - 送信 - 削除のためremovedfileまたはaddedfile等

http://www.dropzonejs.com/#event-list

init : function() { 
    self.on('Every your events', function (file, response) { 
     this.removeFile(file); 
    } 
} 

この関数からのファイルはこれを行うことができます：

Dropzone.forElement("#YourDropBoxId").removeAllFiles(true);