從plupload隊列中刪除文件？

Question

我試圖限制可以通過plupload上傳的文件擴展名。

因爲過濾器無法正常使用HTML5運行時我無法使用它們。因此，我已在下面的代碼綁定到FilesAdded事件

var extensionArray = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx']; 
uploader.bind('FilesAdded', function (up, files) { 
    var invalid = 0; 
    for (var i in files) { 
     var extension = files[i].name 
           .substr((files[i].name.lastIndexOf('.') + 1)) 
           .toLowerCase(); 

     if (extension == '' || -1 === $.inArray(extension, extensionArray)) { 
      uploader.splice(i, 1); //also tried uploader.removeFile(files[i]) 
      invalid++; 
      continue; 
     } 
     //dom manipulation to add file occurs here 
    } 
}); 

不過，雖然這是停止DOM操作存在的任何無效的文件，它似乎並沒有被真正從隊列中移除的項目，當我開始上傳他們全部發送！

這在HTML5和Flash Runtime上都發生了。我還沒有測試過其他人。

綁定到FilesRemoved事件，它永遠不會被觸發！但是在uploader.splice(...之前插入console.log('Invalid files detected');它被輸出到控制檯，以便線路被調用。

Answer 1

簡短版本：您需要在調用init()函數後綁定到filesAdded事件。

我的第一步調試是抓住the uncompressed version off github^{2012年11月18日}。一旦我有了，我可以追蹤這個問題。

所以主要的問題似乎是呼叫removeFile()永遠不會被調用，但爲什麼？

removeFile()被定義爲：

removeFile: function (file) { 
    var i; 

    for (i = files.length - 1; i >= 0; i--) { 
     if (files[i].id === file.id) { 
      return this.splice(i, 1)[0]; 
     } 
    } 
} 

好了，很簡單，這個遍歷文件數組，如果不存在具有匹配的ID文件，然後我們稱之爲拼接功能。

那麼，接頭是什麼樣的？

splice()被定義爲：

splice:function (start, length) { 
    var removed; 

    // Splice and trigger events 
    removed = files.splice(start === undef ? 0 : start, length === undef ? files.length : length); 

    this.trigger("FilesRemoved", removed); 
    this.trigger("QueueChanged"); 

    return removed; 
} 

權，所以這是在FilesRemoved事件應該已經觸發，那麼爲什麼不呢？

回到removeFile()功能，如上所述，它只調用拼接如果找到一個匹配的ID。

因此，下一步是要確定removeFile函數是否被調用。

插入console.log('removeFile called', files);作爲第一行給我們的輸出：removeFile called []

嗯，一個空數組！

好吧然後，看起來像我們綁定到FilesAdded事件正在停止它的正常行爲，沒有問題。我們只需將uploader.files.push(file)添加到我們的FilesAdded綁定中即可。並瞧瞧。當我們點擊開始時，只發送正確的文件。

它的工作......但不完全。
我有一些額外的綁定在那裏，僅用於調試目的，其中之一是在QueueChanged。這會記錄每次發生更改時隊列中文件的數量。

我注意到的是，隊列中的文件數量並未真正反映從隊列中刪除了文件。

因此，快速console.log(uploader.files.length)，這證實有其他事情在這裏發生。

下一步是查看添加文件的默認操作。

看着我注意到開發人員也決定綁定到事件，在init函數中這樣做。從我的角度來看，這是一個奇怪的選擇。但這是他們的選擇。

因此，尋找它們的綁定內部，他們也有一個files.push(file)這意味着我們正在獲取數組中正確文件的所有文件+副本。

注意到的結合是在init()，功能發生了，我從結合刪除uploader.files.push(file)，移動init()打到我FilesAdded之前結合。現在一切正常。

Answer 2

uploader=newplupload.Uploader({ 
//----- 
}); 

uploader.bind('FilesAdded',function(up,files) 
{ 
//---- 
up.refresh();//RepositionFlash/Silverlight 
}); 

uploader.bind('QueueChanged',function(up,files){ 

//#doc-filelist is the id of dive, which shows the Queue 
$('#doc-filelist').html(''); 

$.each(uploader.files,function(i,file){ 
$('#doc-filelist').append(
'<div id="'+file.id+'">'+ 
file.name+'('+plupload.formatSize(file.size)+')<b></b>'+ 
'<spanclass="remove_file"data-file="'+i+'">X</span>'+ 
'</div>'); 
}); 

if(uploader.files.length==0){ 
// #uploadfiles button for start upload 
$('#uploadfiles').addClass('disabled'); 
} 

}); 

uploader.bind('UploadComplete', function (up, file) { 
    up.splice(); 
    up.refresh(); 

}); 


$('.relevant-document').on('click','.remove_file',function(e){ 

uploader.splice($(this).attr('data-file'),1); 

uploader.refresh(); 
});