Question

我有这个样本：

代码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>

CODE 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");

我想要做的是当用户上传文件，然后上传现有文件时。

你怎么能正确地做到这一点？

提前致谢！

Answer 1

这是一种有效的方法：

RecentNewsController

Answer 2

尝试这种方法。

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

Answer 3

对我而言，如果图片已经在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;
       }
     }
   }
 });

Answer 4

尝试这种方法：

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

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

Answer 5

嗨，您只需将addRemoveLinks: true,添加到dropzone功能中，在dropzon ajax之后添加成功功能

            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发送给后端，查找文件在后端并删除文件

Answer 6

“你的每一个事件”喜欢：成功 - 错误 - 发送 - 已删除文件或已添加文件等

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);

如何删除现有的文件dropzone？

6 个答案: