javascript 如何在dropzone插件中添加removefile选项?

jfewjypa  于 2023-01-19  发布在  Java
关注(0)|答案(7)|浏览(134)

我使用了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>
yxyvkwin

yxyvkwin1#

我认为您没有以正确的方式配置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);

现在在删除得到的名称和传递到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');
             });
       }
    }
 }

还请注意,如果你已经改变了服务器端的文件名,你必须找回那个文件名才能删除。

kse8i1jr

kse8i1jr2#

请尝试以下代码:

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

    }
});
pbpqsu0x

pbpqsu0x3#

我遇到了同样的问题,我认为Dhaval的答案会有所帮助,但我从文档中找到了一个更简洁的方法。
来自文档:
如果你想用某个特定的链接来删除文件(而不是内置的addRemoveLinks配置),你可以简单地在模板中插入带有data-dz-remove属性的元素。

<img src="removebutton.png" alt="Click me to remove the file."
> data-dz-remove />

我在预览模板中的一个按钮上测试了这个相同的属性,它按需工作。

cfh9epnr

cfh9epnr4#

服务器端

  • 上传文件 *

保存文件,如果决定将文件信息存储在数据库中,则回显数据库表文件ID;如果决定仅将文件存储在磁盘上,则回显文件的新名称。

  • 删除文件 *

删除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();
                }); 
           }
});
falq053o

falq053o5#

“您的每一个事件”例如:成功-错误-发送-删除文件或添加文件等
http://www.dropzonejs.com/#event-list

init : function () {
    self.on('Every your events', function (file, response) {
        this.removeFile(file);
    }
}

对于从该函数中删除文件,可以执行以下操作:

Dropzone.forElement("#YourDropBoxId").removeAllFiles(true);
7dl7o3gd

7dl7o3gd6#

请尝试以下代码:

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

k2arahey7#

在我的情况下,我的删除文件链接是不可点击的,因为我的文件没有删除。所以我给予这个css

.dz-remove{
    position: inherit !important;
    z-index: inherit !important;
}

相关问题