javascript dropzone js 将删除 url 与删除按钮链接起来
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24238193/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
dropzone js to link delete url with remove button
提问by anam
In Dropzonejs i am creating delete button and then appending it to thumbnails, how can i link url which i am geeting from server directly to remove button by using addRemoveLinks:true,
在 Dropzonejs 中，我正在创建删除按钮，然后将其附加到缩略图，如何将我从服务器直接获取的 url 链接到使用删除按钮 addRemoveLinks:true，
//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);
});
回答by anam
you can add delete link .. in Added file event ,you can get URL in Server response and set it in delete link.
您可以添加删除链接 .. 在添加的文件事件中，您可以在服务器响应中获取 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);
});
回答by beebek
This works with Dropzone 5.0.0
这适用于 Dropzone 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>
回答by Raymond
Add
添加
addRemoveLinks: true,
then use the following inside
然后在里面使用以下内容
init: function () {}
When you click on dz-remove it goes to it's parent then looks for the text of the span element where the picture id is.
当您单击 dz-remove 时，它会转到它的父级，然后查找图片 ID 所在的 span 元素的文本。
Using $ajax you send that imageId to your action and do what you want. Note: I'm using toastr here for user notifications.
使用 $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);
}
})
});
Hope this helps you bro :)
希望这对你有帮助兄弟:)
