悬浮窗JS链接删除与删除按钮

在Dropzonejs我创造删除按钮，然后将其追加到缩略图URL，我怎么能链接URL，我是从服务器直接geeting使用addRemoveLinks:true删除按钮，悬浮窗JS链接删除与删除按钮

//Write function if you need to add some event after files added 
     myDropzone.on("addedfile", function(file) { 
     console.log('Files Added using ---------->'+$attrs.apiCall); 
     var _this=this; 
     /* Maybe display some more file information on your page */ 
     var removeButton = Dropzone.createElement("<button data-dz-remove>-Remove file</button>"); 
     removeButton.addEventListener("click", function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     _this.removeFile(file); 
     }); 
     file.previewElement.appendChild(removeButton); 
     });

来源

2014-06-16 anam

你有没有想出解决办法？我正在做同样的事情...... – cjn

@cjn是的，我已添加删除链接功能。检查代码的答案。 – anam

您可以添加删除链接..在添加文件事件中，您可以在服务器响应中获取URL并将其设置为删除链接。

myDropzone.on("addedfile", function (file) { 
    var _this = this; 

    /* Maybe display some more file information on your page */ 
     var removeButton = Dropzone.createElement("<button data-dz-remove " + 
         "class='del_thumbnail btn btn-default'><span class='glyphicon glyphicon-trash'></span></button>"); 

     removeButton.addEventListener("click", function (e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     var server_file = $(file.previewTemplate).children('.server_file').text(); 
     // Do a post request and pass this path and use server-side language to delete the file 
     //   $.post(server_file,{'X-CSRFToken': $cookies.csrftoken}, 'json'); 
     $http({ 
      method: 'POSt', 
      url: server_file, 
      headers: { 
        'X-CSRFToken': $cookies.csrftoken 
      } 
     }); 
     _this.removeFile(file); 
     }); 
     file.previewElement.appendChild(removeButton); 
});

来源

2014-07-14 13:05:27 anam

添加

addRemoveLinks: true,

然后用内

init: function() {}

下当你点击DZ-删除它进入到它的父然后查找span元素的文本，其中图片ID是。

使用$ ajax，您可以将imageId发送到您的操作并执行所需操作。注意：我在这里使用toastr进行用户通知。

$(".dz-remove").on("click", function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 

    var imageId = $(this).parent().find(".dz-filename > span").text(); 

    $.ajax({ 
    url: "Your url here", 
    data: { imageId: imageId}, 
    type: 'POST', 
    success: function (data) { 
      if (data.NotificationType === "Error") { 
       toastr.error(data.Message); 
      } else { 
       toastr.success(data.Message);       
      }}, 
      error: function (data) { 
       toastr.error(data.Message); 
      } 
    }) 

});

希望这有助于你老兄:)

来源

2016-09-21 21:20:23 Raymond

这适用于悬浮窗5.0.0

<script> 
    Dropzone.options.dropzoneForm = { 
     addRemoveLinks: true, 
     dictDefaultMessage: "<strong>Drop files here or click to upload. </strong>", 
     init: function() { 
      this.on("complete", function(file) { 
       $(".dz-remove").html("<div><span class='fa fa-trash text-danger' style='font-size: 1.5em'></span></div>"); 
      }); 
     } 
    }; 
</script>

来源

2017-08-03 01:02:37 beebek

悬浮窗JS链接删除与删除按钮

回答

相关问题