Dropzone將添加的行數添加到dropzone的文件數量？

Question

我正在使用jQuery Dropzone plugin。在懸浮窗我有一個表，像這樣

<table id="data"> 
    <tr> 
     <td>Name</td> 
     <td>Email</td> 
     <td>Phone</td> 
    </tr> 
</table> 

標記可以說我有3個文件下降的懸浮窗，所以我想在表中顯示3行的輸入字段。所以，對於我已經作出了JS這樣

Dropzone.options.documentDropzone = { 
    init: function() { 
     this.on("complete", function (file) { 
      if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) { 
       var Length = this.getAcceptedFiles().length; // To get the number of files in the dropzone 
       // Loop to add number of rows after adding files to dropzone 
       for(i=0; i < Length; i+) { 
          var html = $('<tr><td><input type=\"text\" name=\"name\"></td><td><input type=\"text\" name=\"email\"></td><td><input type=\"text\" name=\"phone\"></td></tr>'); 
          $('table#data').append(html); 
         } 
      } 
     } 
    } 
} 

這是工作的罰款一樣可以說我已經加入3個文件的第一次，因此是很好的添加3行。另一次可以說我已經添加了2個文件。所以在dropzone我現在有3 + 2 = 5個文件。所以它應該顯示5個文件行。但它是這樣首先顯示它顯示3個文件，然後當我添加另外2個文件，然後它顯示像3 +（3 + 2）= 8。所以有人可以告訴我如何解決這個問題？任何幫助和建議都會非常可觀。謝謝

Answer 1

使用removeAllFiles方法將計數器重置爲0;假設你使用你的表格來顯示上傳的文件，而不是dropzone本身。

this.on('complete', function() { 
    if (! this.getUploadingFiles().length && ! this.getQueuedFiles().length) { 
     var Length = this.getAcceptedFiles().length; 
     for (var i = 0; i < Length; i++) { 
      var html = $('<tr><td><input type=\"text\" name=\"name\"></td><td><input type=\"text\" name=\"email\"></td><td><input type=\"text\" name=\"phone\"></td></tr>'); 
      $('table#data').append(html); 
     } 
     this.removeAllFiles(); 
    } 
}); 

編輯：似乎曲解了這個問題，對不起。當添加新文件時，您可以重新繪製表格，就像在做$('table#data').html(html)一樣 - 但是這有缺點清除表格中的內容，失去任何活動/焦點狀態等。根據我對Dropzone的經驗，您必須致電removeAllFiles停止跟蹤較早的上傳。所以，如果你只使用Dropzone作爲上傳文件的手段，而不是將其用於顯示，那麼我會按照上面的建議去做。