jquery 如何删除现有的文件拖放区?

8ljdwjyq  于 2022-11-03  发布在  jQuery
关注(0)|答案(8)|浏览(169)

我有这个样:
link

代码HTML:

<div class="dropzone dz-clickable" id="myDrop">
     <div class="dz-default dz-message" data-dz-message="">
          <span>Upload or drag patient photo here</span>
     </div>
</div>

代码JS:

Dropzone.autoDiscover = false;
 var myDropzone = new Dropzone("div#myDrop", {
   addRemoveLinks: true,
   url: "#",
   maxFiles: 1,
   init: function() {

     this.on("maxfilesexceeded", function(file) {
       alert("You are not allowed to chose more than 1 file!");
       this.removeFile(file);

     });

     this.on("addedfile", function(file) {
       myDropzone.options.removefile.call(myDropzone, mockFile);
       //  I want to delete an existing element
     });

   }
 });

 var fileName = $('#profilePicture').val();
 var mockFile = {
   name: fileName,
   size: 12345
 };
 myDropzone.options.addedfile.call(myDropzone, mockFile);
 myDropzone.options.thumbnail.call(myDropzone, mockFile, "https://lh3.googleusercontent.com/-eubcS91wUNg/AAAAAAAAAAI/AAAAAAAAAL0/iE1Hduvbbqc/photo.jpg?sz=104");

我想做的是当用户上传一个文件,然后现有的一个被删除。
如何正确执行此操作?
提前感谢!

ui7jx7zq

ui7jx7zq1#

试试这个方法。

removedfile: function(file) {
            file.previewElement.remove();
}
mjqavswn

mjqavswn2#

这是一种可行方法:

var currentFile = null;
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDrop", {
  addRemoveLinks: true,
  url: "#",
  maxFiles:1,
  init: function() {
    this.on("addedfile", function(file) {
      if (currentFile) {
        this.removeFile(currentFile);
      }
      currentFile = file;
    });
  }   
});
xqkwcwgp

xqkwcwgp3#

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

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

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

Dropzone.forElement("div#myDrop").removeAllFiles(true);
qlckcl4x

qlckcl4x4#

请尝试以下方法:

success: function (file, response) {
                    if (this.files.length > 1)
                        this.removeFile(this.files[0]);
                    //Do others tasks...
                }

使用此方法将删除前一个项目。

j1dl9f46

j1dl9f465#

对我来说很有效,如果图像已经上传到dropzone中,它不允许我添加更多。

this.on("addedfile", function(file) {
   /* Valid only in the dropzone . If a repetitive document shows ALERT and the previous item will disappear.(Sorry my English). */
   if (this.files.length) {
     var i, len, pre;
     for (i = 0, len = this.files.length; i < len - 1; i++) {
       if (this.files[i].name == file.name && this.files[i].size == file.size && this.files[i].lastModifiedDate.toString() == file.lastModifiedDate.toString()) {
         alert("Doc: " + file.name + " is already registered.")
         return (pre = file.previewElement) != null ? pre.parentNode.removeChild(file.previewElement) : void 0;
       }
     }
   }
 });
ygya80vv

ygya80vv6#

hi你可以只添加addRemoveLinks: true,到dropzone函数,并在dropzon AJAX 之后添加success函数

success:function(file,response){
              file.serverId = response.id;
    $(".dz-preview:last .dz-remove").attr('onclick','delete_file('+file.serverId+')');
            }

在这段代码中,上传文件成功后,在onclick中从dropzone向最后一个标签中添加一个标签,以调用delete_file函数,在此函数上,您可以接收id并将id发送到后端,在后端中查找文件并删除文件

iqjalb3h

iqjalb3h7#

您可以将maxFiles设置为1或任何其他数字,侦听maxfilesexceeded事件,然后从files数组中删除特定文件(第一个

$("#dropzone-upload").dropzone({
      init: function() {
        this.on("maxfilesexceeded", function(file){
          this.removeFile(this.files[0])
          alert("Only one file can be uploaded at a time, original file removed!");
        });
      },
      url: "exampleurl",
      maxFiles: 1,
    });
  });
2jcobegt

2jcobegt8#

不在放置区中的现有文件中存在问题。默认情况下,文件数组和maxFiles选项或maxFilesexceeded事件将无法按预期工作。解决方案:将现有文件推入文件数组。示例:

$("#imagesarea").dropzone({
        url: "https://<yourdomain>/upload",
        maxFiles: 1,
        maxFilesize: 10,
        acceptedFiles: ".jpeg,.jpg,.png",
        timeout: 50000,
        addRemoveLinks: true,
        success: function(file, response){
            //do something on succcess
        },
        error: function(file, response){
            return false;
        },
        maxfilesexceeded: function(file) {
            this.removeAllFiles();
            this.addFile(file);                
        },
        init: function() {
           mockFile = { 
                        name: "320212", 
                        id: 320212, 
                        size: 452810,
                        accepted: true,
                        dataURL: "https://<yourdomain>/file.jpg" 
           };

           //show existing file
           this.displayExistingFile(mockFile, mockFile.dataURL);

           //here is important 
           this.files.push(mockFile);

           this.on("removedfile", function (file) {
               //do something when file removed
           });
        }
    });

相关问题