我使用了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>
我认为您没有以正确的方式配置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将文件名推送到数组的成功方法，例如：file_up_names=[];
success:function(file){
file_up_names.push(file.name);
现在，在delete中获取名称并将其传递到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');
});
}
}
}
还要注意，如果您在服务器端更改了文件名，则必须恢复要删除的文件名。
尝试以下代码：
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',
},
});
}
});
}
});
我遇到了同样的问题。我以为达瓦尔的回答会有所帮助，但我从文档中找到了一个更干净的方法。
来自文档：
如果你想要一些特定的链接来删除一个文件（而不是在addRemoveLinks配置中），您可以简单地在具有data-dz-remove属性的模板。示例：
<img src="removebutton.png" alt="Click me to remove the file."
> data-dz-remove />
我在预览模板中的一个按钮上测试了这个相同的属性，它可以根据需要工作。
服务器端
上传文件
保存文件，如果您决定将文件信息存储在数据库中，echo数据库表文件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();
});
}
});
"每个你的事件"如：成功-错误-发送-删除文件或添加文件等
http://www.dropzonejs.com/#event-列出
init : function () {
self.on('Every your events', function (file, response) {
this.removeFile(file);
}
}
对于从中删除文件，此功能可以执行以下操作：
Dropzone.forElement("#YourDropBoxId").removeAllFiles(true);
尝试以下代码：
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');
});
在我的情况下，我的删除文件链接不可点击，因为我的文件没有被删除。所以我给那个css
.dz-remove{
position: inherit !important;
z-index: inherit !important;
}