javascript - dropzonejs 手动删除服务器上的文件，一次一个

Question

我正在使用 dropzonejs 上传和删除服务器上的多个图像。上传多张图像工作正常，但一次删除一张图像给我带来了问题。单击删除链接时，与图像关联的所有 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

由于这些问题，不知怎的，我已经想出了从服务器删除文件的方法 link1 link2 。 我已经发布了我的代码的最终结果。希望它能帮助其他人。

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