dropzonejs一度に1つずつ手動でサーバ上のファイルを削除する

Question

私はdropzonejsを使って、サーバ上の複数のイメージをアップロードして削除しています。複数の画像をアップロードするとうまく動作しますが、画像を1枚ずつ削除すると問題が発生します。削除リンクをクリックすると、画像と関連付けられたすべてのajax関数が同時にトリガーされ、選択されたファイルではなくすべてのファイルが削除されます。 関連付けられた各イメージファイルからリンクを区別する方法???

jQuery(function() { 
    var articleID = jQuery('#articleID').val(); 
    Dropzone.autoDiscover = false; 
    var myDropzone = new Dropzone('#media-uploader', { 
     url: "url?action=kl_upload_article_images", 
     acceptedFiles: 'image/*', 
     maxFilesize: 50, 
     previewTemplate: $('#preview-template').html(), 
     thumbnailHeight: 120, 
     thumbnailWidth: 120, 
     parallelUploads: 100, 
     uploadMultiple: true, 
     autoProcessQueue: false, 
     addRemoveLinks: true, 
     autoProcessQueue: false, 
     init: function() 
     { 
      dropZoneObject = this; 
      //getting file name and directory to preview stored images in dropzonejs 
      $.get("url?action=kl_edit_article_images&article_id=" + articleID, function (data) 
      { 
       //loopging through each data to preview images 
       $.each(data, function (key, value) 
       { 
        var mockFile = {name: value.name, size: value.size}; 
        dropZoneObject.emit("addedfile", mockFile); 
        var fileUrl = 'fileDirectory/'; ? > '+value.name; 
          dropZoneObject.emit("thumbnail", mockFile, fileUrl); 
        dropZoneObject.emit("complete", mockFile); 
        //@start of removing file 
        dropZoneObject.on("removedfile", function (file) 
        { 
         $.post("url?action=kl_delete_article_images&image_name=" + value.name + "&article_id=" + articleID); 
        }); 
        //@end of removing file 
       }); 
       dropZoneObject.on('sending', function (file, xhr, formData) 
       { 
        formData.append('articleId', articleID); 
       }); 
      }); 
     } 
    }); 
}); 

Answer 1

まあ何とか私は、サーバーからこれらの質問 link1link2のおかげで、ファイルを削除するためにそれを把握しています。 私のコードの最終結果を掲載しました。それが他人を助けることを願っています。

jQuery(function() { 
       var articleID   = jQuery('#articleID').val(); 
       Dropzone.autoDiscover = false; 
       var myDropzone = new Dropzone('#media-uploader', { 
       url: "url?action=kl_upload_article_images", 
       acceptedFiles: 'image/*', 
       maxFilesize : 50, 
       previewTemplate: $('#preview-template').html(), 
       thumbnailHeight: 120, 
       thumbnailWidth: 120, 
       parallelUploads: 100, 
       uploadMultiple: true, 
       autoProcessQueue: false, 
       addRemoveLinks : true, 
       autoProcessQueue : false, 
       //removedfile is called whenever file is removed from the list 
       removedfile : function(file) 
       { 
        var imageName = file.name; 
        var confirmation = confirm('Are you sure you want to delete this image?'); 
        if(confirmation == true) 
        { 
      //post request to remove file from server 
         $.post("url?action=kl_delete_article_images&image_name=" + imageName +"&article_id="+ articleID); 
      //deleting thumbnails 
         var _ref; 
         return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; 
        } 
       }, 
       init: function() 
       { 
        dropZoneObject = this; 
      //getting file name and directory to preview stored images in dropzonejs 
        $.get("url?action=kl_edit_article_images&article_id=" + articleID,function(data) 
        { 
      //looping through each data to preview images 
        $.each(data,function(key,value) 
        { 
       var mockFile = {name:value.name,size:value.size}; 
       dropZoneObject.emit("addedfile", mockFile); 
       var fileUrl = 'fileDirectory/';?>'+value.name; 
       dropZoneObject.emit("thumbnail", mockFile, fileUrl); 
       dropZoneObject.emit("complete", mockFile); 
       }); 
      //end of loop 

      dropZoneObject.on('sending', function(file, xhr, formData) 
      { 
       formData.append('articleId', articleID); 
      }); 
      }); 
    } 
});