如何限制上傳的dropzone.js文件的數量？

Question

根據使用情況，我如何限制dropzone.js允許的文件數量？

例如，我可能只需要允許上傳1個，2個或4個文件。

這不是uploadMultiple。不幸的是，uploadMultiple僅適用於每個請求處理的文件數量。

Answer 1

Nowell pointed it out that this has been addressed截至8月6日，使用這種形式的2013年的工作的例子可能是：

<form class="dropzone" id="my-awesome-dropzone"></form> 

你可以使用這個JavaScript：

Dropzone.options.myAwesomeDropzone = { 
    maxFiles: 1, 
    accept: function(file, done) { 
    console.log("uploaded"); 
    done(); 
    }, 
    init: function() { 
    this.on("maxfilesexceeded", function(file){ 
     alert("No more files please!"); 
    }); 
    } 
}; 

懸浮窗元素甚至獲得特別的風格，所以你可以做這樣的事情：

<style> 
    .dz-max-files-reached {background-color: red}; 
</style> 

Answer 2

它看起來像maxFiles是您正在尋找的參數。

https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L667

Answer 3

maxFiles: 1做這項工作，但如果你也想刪除其他文件，您可以使用來自Wiki page採取此示例代碼：

我如何限制文件的數量？

你很幸運！從3.7.0開始，Dropzone支持maxFiles 選項。簡單地將其設置爲所需的數量，你很好去。 如果你不希望被視爲拒絕文件執行，只需註冊 的maxfilesexceeded事件，並立即刪除該文件：

myDropzone.on("maxfilesexceeded", function(file) 
{ 
    this.removeFile(file); 
}); 

Answer 4

我實現了這個方式略有不同。每當添加新文件時，我只刪除舊的丟棄文件。它用作覆蓋文件，這是我在這裏要用到的用戶體驗。

Dropzone.options.myAwesomeDropzone = { 
    accept: function(file, done) { 
    console.log("uploaded"); 
    done(); 
    }, 
    init: function() { 
    this.on("addedfile", function() { 
     if (this.files[1]!=null){ 
     this.removeFile(this.files[0]); 
     } 
    }); 
    } 
}; 

Answer 5

我認爲最直觀的單個文件上傳過程是更換在新條目上一個文件。

$(".drop-image").dropzone({ 
    url: '/cart?upload-engraving=true', 
    maxFiles: 1, 
    maxfilesexceeded: function(file) { 
     this.removeAllFiles(); 
     this.addFile(file); 
    } 
}) 

Answer 6

提供的解決方案的問題是您只能上傳1個文件。在我的情況下，我需要一次只上傳一個文件（點擊或放下）。

這是我的解決方案..

Dropzone.options.myDropzone = { 
     maxFiles: 2, 
     init: function() { 
      this.handleFiles = function(files) { 
       var file, _i, _len, _results; 
       _results = []; 
       for (_i = 0, _len = files.length; _i < _len; _i++) { 
        file = files[_i]; 
        _results.push(this.addFile(file)); 
        // Make sure we don't handle more files than requested 
        if (this.options.maxFiles != null && this.options.maxFiles > 0 && _i >= (this.options.maxFiles - 1)) { 
         break; 
        } 
       } 
       return _results; 
      }; 
      this._addFilesFromItems = function(items) { 
       var entry, item, _i, _len, _results; 
       _results = []; 
       for (_i = 0, _len = items.length; _i < _len; _i++) { 
        item = items[_i]; 
        if ((item.webkitGetAsEntry != null) && (entry = item.webkitGetAsEntry())) { 
         if (entry.isFile) { 
          _results.push(this.addFile(item.getAsFile())); 
         } else if (entry.isDirectory) { 
          _results.push(this._addFilesFromDirectory(entry, entry.name)); 
         } else { 
          _results.push(void 0); 
         } 
        } else if (item.getAsFile != null) { 
         if ((item.kind == null) || item.kind === "file") { 
          _results.push(this.addFile(item.getAsFile())); 
         } else { 
          _results.push(void 0); 
         } 
        } else { 
         _results.push(void 0); 
        } 
        // Make sure we don't handle more files than requested 
        if (this.options.maxFiles != null && this.options.maxFiles > 0 && _i >= (this.options.maxFiles - 1)) { 
         break; 
        } 
       } 
       return _results; 
      }; 
     } 
    }; 

希望這有助於;）

Answer 7

我想指出的。也許這只是發生在我身上，但是當我在dropzone中使用this.removeAllFiles（）時，它會觸發事件COMPLETE並且這會引發這種情況，我所做的是檢查fileData是否爲空，以便實際提交表單。

Answer 8

爲什麼你不使用CSS來禁用點擊事件。當達到最大文件時，Dropzone會自動添加一類dz-max-files-reached。

使用CSS來禁用點擊懸浮窗：

.dz-max-files-reached { 
      pointer-events: none; 
      cursor: default; 
} 

信用：此answer

Answer 9

您可以限制在dropezone.js

Dropzone.prototype.defaultOptions改變上傳的文件數量= { maxFiles：10, }

Answer 10

你也可以在callbac中添加KS - 在這裏我使用了懸浮窗角

那真的很好，我

dzCallbacks = { 
    'addedfile' : function(file){ 
     $scope.btSend = false; 
     $scope.form.logoFile = file; 
    }, 
    'success' : function(file, xhr){ 
     $scope.btSend = true; 
     console.log(file, xhr); 
    }, 
    'maxfilesexceeded': function(file) { 
     $timeout(function() { 
      file._removeLink.click(); 
     }, 2000); 
    } 
} 

Answer 11

替代解決方案：

init: function() { 
    this.on("addedfile", function(event) { 
     while (this.files.length > this.options.maxFiles) { 
      this.removeFile(this.files[0]); 
     } 
    }); 
}