从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();
});