如何在點擊按鈕後調用Dropzone.js中的.removeAllFiles（）函數

Question

我正在使用http://www.dropzonejs.com/（dropzone.js）庫。我已經初始化我的表單元素爲一體，

var drop = $("#upload").dropzone({ 
       uploadMultiple: "true", 
       addRemoveLinks: "true", 
       thumbnailWidth: "250", 
       thumbnailHeight: "250", 
       maxFilesize: "10", 
       headers: { 
        "title": titles, 
        "location": locations, 
        "tag": tags 
        }     
      }); 

現在，當用戶點擊一個按鈕<button id="close"></button>，我想用drop.removeAllFiles(true)功能清空整個列表，在Dropzone.js官方網站的建議。

所以，我嘗試使用

$("#close").click(function(){ 
     drop.removeAllFiles(true); 
    }); 

但它不工作，在console.log我收到錯誤removeAllFiles() is not declared for drop。

我在哪裏錯了？

Answer 1

這是代碼，它會解決你的問題。

$(function() { 
      Dropzone.options.myAwesomeDropzone = { 
      init: function() { 
       var myDropZone = this; 
       $("#btnRemoveAll").click(function() { 
          myDropZone.removeAllFiles(); 
         } 
       ); 
      } 

     }; 
}); 

Answer 2

試試這個。這還包括對服務器的JSON調用以刪除文件。

mydropzone = new Dropzone("#mydropzone",{ 
    url: "/dropzone", 
    addRemoveLinks : true, 
    maxFilesize: 2.0, 
    dictResponseError: 'Error uploading file!', 
    removedfile: function(file) { 
     var name = {file: file.name} 
     $.ajax({ 
      type: 'POST', 
      url: '/dropzone_delete', 
      contentType: 'application/json', 
      data: JSON.stringify(name), 
      dataType: 'json', 
      success: function (e) {console.log(e);} 
     }); 
     var _ref; 
     return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; 
    } 
}); 

// Clear all files 
$("#btn_clear_dropzone").click(function() { 
    // Delete existing files 
    mydropzone.removeAllFiles(); 
    // Cancel current uploads 
    mydropzone.removeAllFiles(true); 
}); 

請讓我知道，如果有人有進一步完善此代碼的建議。

Answer 3

您的drop引用了jQuery對象而不是Dropzone對象。

var drop = $("#upload").dropzone(options); 

有時需要使用帶有dropzone的jQuery(selector [,context])。所以非jQuery的構造函數並不方便。

var drop = new Dropzone(selector, options); 

相反，你可以用（醜）獲得懸浮窗對象：

var drop = $("#upload").dropzone(options).get(0).dropzone; 

$("#close").click(function(){ 
    drop.removeAllFiles(true); 
}); 

Answer 4

這爲我工作。

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

參考：https://github.com/enyo/dropzone/issues/180

Answer 5

這是工作......請試試這個。

$("#close").click(function(){ 
    drop.removeAllFiles(true); 
}); 
$("#upload").dropzone({ 
      uploadMultiple: "true", 
      addRemoveLinks: "true", 
      thumbnailWidth: "250", 
      thumbnailHeight: "250", 
      maxFilesize: "10", 
      headers: { 
       "title": titles, 
       "location": locations, 
       "tag": tags 
       }, 
      init: function() { 
     var dropzone = this; 
     $("#close").click(function(){ 
    dropzone.removeAllFiles(true); 
}); 
    } 


     });