从 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 运行时都会发生这种情况。我还没有测试过其他的。

绑定到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];
        }
    }
}

好的，很简单，这会遍历 files 数组，如果有一个文件具有匹配的 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();
});