從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事件，它永遠不會被觸發！ 但是插入console.log('Invalid files detected'); 就在uploader.splice(...之前uploader.splice(...它被輸出到控制台，以便調用該行。

Answer 1

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

調試的第一步是從 ^{2012年11月18日} github上獲取未壓縮的版本 。 有一次，我可以追蹤這個問題。

所以主要的問題似乎是對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()定義為：

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 ，它只調用splice。

因此，下一步是找出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();
});