[英]Dropzone.js uploads only two files when autoProcessQueue set to false
我使用Dropzone.js並且我希望它不會自動上傳已刪除的內容,而是在用戶單擊按鈕時上傳。 所以我將autoProcessQueue
選項設置為false
。 單擊按鈕時,將processQueue()
方法。 我想現在整個隊列都被處理了。 但事實並非如此。 只會上傳在parallelUploads
選項中指定的文件數量。 parallelUploads
的標准值似乎是 2。每次點擊 2 個文件都會被處理和上傳。
我是否必須將parallelUploads
設置為一個非常高的數字,現在才能解決這個問題?
這是我的完整 JS 代碼:
var myDropzone = new Dropzone("div#myId", {
url: "http://www.torrentplease.com/dropzone.php",
addRemoveLinks: true,
thumbnailWidth: "80",
thumbnailHeight: "80",
dictCancelUpload: "Cancel",
autoProcessQueue: false
});
myDropzone.on("drop", function(event) {
$('.edit_tooltip .option_bar').animate({
opacity: 1,
top: "-5"
});
});
$('.edit_tooltip .option_bar .button').click(function() {
myDropzone.processQueue();
});
添加parallelUploads:10 (這是您的最大數量)
有一個簡單的方法可以解決這個問題,可以在這里找到:
https://github.com/enyo/dropzone/issues/253#issuecomment-22184190
“如果你想讓 autoProcessQueue 在第一次上傳后為 true,那么只需監聽處理事件,並在里面設置 this.options.autoProcessQueue = true;。”
所以只需添加
this.on("processing", function() {
this.options.autoProcessQueue = true;
});
我的解決辦法是:
// init dropzone with auto process queue false
var adPhotosDropzone = new Dropzone("#dropzone", {
autoProcessQueue: false,
parallelUploads: 3
});
$(document).on('click', '#btnUpload', function () {
// enable auto process queue after uploading started
adPhotosDropzone.options.autoProcessQueue = true;
// queue processing
adPhotosDropzone.processQueue();
});
// disable queue auto processing on upload complete
adPhotosDropzone.on("queuecomplete", function() {
adPhotosDropzone.options.autoProcessQueue = false;
});
很晚了,但也許它會幫助某人。
我注意到當我將 maxFilesSize 放在 parallerUploads 上方時它不起作用。
所以選項的順序應該是 .
.
.
parallelUploads: 20,
maxFilesize: 2,
maxFiles: 20,
.
.
添加過載兩個事件,如
處理 -> 允許上傳所有文件
queuecomplete -> 恢復正常
init: function () {
this.on("queuecomplete", function () {
this.options.autoProcessQueue = false;
});
this.on("processing", function () {
this.options.autoProcessQueue = true;
});
};
我將這個 dropzone 與選項 (autoProcessQueue:false) 一起使用,它只上傳 2 個文件而不是我的整個文件。 我在 git's issue 的 oligoil 的回答中找到了這個解決方法
這個想法很簡單(因為我們要一個一個上傳文件,記住這個選項!:D)。
它上傳多個但限制為1個,上傳一個文件后觸發下一個隊列!
希望它可以幫助某人!
這是我使用該想法的代碼(因為我有 2 個表單要上傳,上傳所有圖像后,它將提交其他表單)
Dropzone.options.dropzoneForm = {
paramName: "file", // The name that will be used to transfer the file
autoProcessQueue: false,
addRemoveLinks:true,
parallelUploads : 1,
maxFiles : 50,
autoProcessQueue : false,
autoQueue : true,
dictDefaultMessage: "<strong>Drop files here or click to upload. </strong>",
init: function () {
....
this.on("complete", function (file) {
if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
console.log("END ", this.getQueuedFiles().length);
}
else {
Dropzone.forElement("#dropzoneForm").processQueue();
}
});
}
};
如果您不想設置 maxFiles(默認無限制)並使用具有所需值的 parallelUploads。 讀這個!
我已經通過設置解決了問題行為
autoQueue: false,
autoProcessQueue: true,
然后當我想上傳文件時,我只需將它們添加到隊列中:
myDrop.enqueueFile(file)
但是,這種方法只接受一個文件,對於我正在使用的多個文件:
myDrop.on("addedfiles", function(files){
//wait confirmation, or do some processing with the files, then:
files.forEach(function(file){
myDrop.enqueueFile(file)
})
}
請注意,“已添加文件”事件尚未出現在文檔中。 我捕獲拖入拖放區或由單擊事件添加的所有文件。
這很好,因為如果您使用“發送”事件來添加 POST 數據或“parallelUploads”,示例代碼可以正常工作並且不會干擾下一個文件。 我正在使用 Sweet Alert 2 在上傳圖像之前詢問一些標簽。
我認為您可以允許 uploadMultiple 並更改 dropzone.js 文件。
首先,允許uploadMultiple 接下來,把這行代碼改成dropzone.js:
返回 this.processFiles(queuedFiles.slice(0, parallelUploads - processingLength));
為了
返回 this.processFiles(queuedFiles.slice(0, queuedFiles.length));
有點晚了,但我對其他答案不滿意,所以這是我的。
單擊發送后更改 autoProcessingQueue(即使是暫時的)意味着如果您將另一個文件添加到放置區而其他文件仍在排隊,則無需再次按發送即可上傳,這是我不想要的。 而且我也不想使用 setTimeout 或 busyloop。 所以這里是如何做到這一點:
修改 dropzone.js 文件。 首先,在 Dropzone 函數中,您需要添加第二個文件數組來存儲按下發送時的隊列:
function Dropzone(element, options) {
...
this.files = [];
this.files2 = [];
然后,通過修改 processQueue 在單擊發送時將文件保存到其中
Dropzone.prototype.processQueue = function() {
this.files2 = this.getQueuedFiles();
...
最后,編輯 _finished 函數,以便在文件上傳完成后,如果按下發送時隊列中仍有剩余文件,則會發送另一個文件:
Dropzone.prototype._finished = function(files, responseText, e) {
var file, _i, _len;
for (_i = 0, _len = files.length; _i < _len; _i++) {
file = files[_i];
file.status = Dropzone.SUCCESS;
this.emit("success", file, responseText, e);
this.emit("complete", file);
this.files2 = this.files2.filter(function(e) { return e.status == "queued" }); // Remove the files that are finished or already being uploaded
}
if (this.options.uploadMultiple) {
this.emit("successmultiple", files, responseText, e);
this.emit("completemultiple", files);
}
if (this.options.autoProcessQueue) {
return this.processQueue();
}
else {
if (typeof this.files2 != "undefined" && this.files2.length > 0) {
this.processFiles(this.files2.slice(0,1)); // process the next file if there's one
}
}
};
這為我解決了這個問題,無需更改任何 dropzone.js 代碼或取消 parallelUploads 設置。
$('#submit').click(function(e){
e.preventDefault();
function tryQueue(){
var numQueued=dz.getQueuedFiles().length;
var numFiles=numQueued+dz.getUploadingFiles().length;
if(numQueued>0){
dz.processQueue();
}
if(numFiles>0){
setTimeout(tryQueue,1000);
}
else window.location='/'; //redirect when finished
}
tryQueue();
});
這假設 dz 是 dropzone 實例。 它通過調用 processQueue 來工作,直到所有內容都已上傳。 processQueue 中的邏輯負責在不需要執行任何操作時返回,因此不會對輪詢造成損害。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.