如何在 dropzone 插件中添加 removefile 选项?
Posted
技术标签:
【中文标题】如何在 dropzone 插件中添加 removefile 选项?【英文标题】:how to add removefile option in dropzone plugin? 【发布时间】:2016-02-17 04:06:57 【问题描述】:我使用了 dropzone.js (http://www.dropzonejs.com/)。我正在尝试添加删除按钮来删除图像。但我收到 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>
【问题讨论】:
【参考方案1】:我认为您没有以正确的方式配置dropzone
。
init: function()
addRemoveLinks: true,
上面的代码无效。
这样使用
Dropzone.options.myAwesomeDropzone =
addRemoveLinks: true,
init: function()
...
;
或者你也可以使用this.addRemoveLinks = true
如果你想处理删除文件的事件,你可以这样使用
removedfile: function(file)
x = confirm('Do you want to delete?');
if(!x) return false;
在服务器端处理文件的删除。
关于 dropzone 的成功方法将文件名推送到数组 eg: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');
);
还请注意,如果您在服务器端更改了文件名,则必须取回该文件名才能删除。
【讨论】:
如何添加php url链接删除文件? 嗨 raju 我仍然得到 removelink undefined 这是一个完整的示例代码。请查看wikisend.com/download/322352/sampledropzone.rar 如何在 dropzone 中使用缩略图显示来自服务器的即时名称。你能指导我吗 @pinkpanther 嗨,我已经再次上传了。这是新链接wikisend.com/download/168728/sampledropzone.rar【参考方案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',
,
);
);
);
【讨论】:
【参考方案3】:我遇到了同样的问题。我认为 Dhaval 的回答会有所帮助,但我从文档中找到了一种更简洁的方法。
来自文档:
如果你想要一些特定的链接来删除文件(而不是内置的 在 addRemoveLinks 配置中),您可以简单地在 具有 data-dz-remove 属性的模板。示例:
<img src="removebutton.png"
> data-dz-remove />
我在我的预览模板中的一个按钮上测试了这个相同的属性,它可以根据需要工作。
【讨论】:
您能详细解释一下吗?如何在模板中插入?模板是 html 吗?【参考方案4】:服务器端
上传文件
保存文件,如果您决定将文件信息存储在数据库中, 回显数据库表文件 ID,或者如果您决定将文件存储在磁盘上 仅,回显文件的新名称。
删除文件
删除从 POST var $_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();
);
);
【讨论】:
【参考方案5】:“每个你的事件”喜欢:成功 - 错误 - 发送 - 删除文件或添加文件等。
http://www.dropzonejs.com/#event-list
init : function ()
self.on('Every your events', function (file, response)
this.removeFile(file);
for remove file from out of this function 可以这样做:
Dropzone.forElement("#YourDropBoxId").removeAllFiles(true);
【讨论】:
【参考方案6】:试试下面的代码:
Dropzone.autoDiscover = false;
var dropzone = new Dropzone ("#mydropzone",
maxFilesize: 256, // Set the maximum file size to 256 MB
paramName: "document[attachment]", // Rails expects the file upload to be something like model[field_name]
autoProcessQueue: false,
addRemoveLinks: true // Don't show remove links on dropzone itself.
);
dropzone.on("removedfile", function(file)
alert('remove triggered');
);
dropzone.on("addedfile", function(file)
alert('add triggered');
);
dropzone.on("success", function(file)
alert('success triggered');
);
【讨论】:
以上是关于如何在 dropzone 插件中添加 removefile 选项?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 ReactJs 中的 dropzone 将文件及其描述添加到状态?