从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(...它之前插入输出到控制台,以便调用该行.

Answer 1

简短版本：您需要在调用函数后filesAdded绑定到事件。init()

我调试的第一步是从 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()被定义为：

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