我试图限制可以通过plupload上传的文件扩展名。

因为过滤器无法在HTML5运行时中正常使用,所以我无法使用它们。因此我将以下代码绑定(bind)到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运行时都在发生这种情况。我还没有测试其他人。

绑定(bind)到FilesRemoved事件,永远不会触发它!但是在console.log('Invalid files detected');之前插入uploader.splice(...会将其输出到控制台,因此该行将被调用。

最佳答案

简短版:您需要在调用filesAdded函数之后绑定(bind)到init()事件

我进行调试的第一步是抓到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
时才调用拼接

因此,下一步是找出是否甚至调用了removeFile函数。

插入console.log('removeFile called', files);作为第一行,给我们输出:removeFile called []
嗯,一个空数组!

好的,好像我们绑定(bind)到FilesAdded事件正在停止它的通常行为,没问题。我们只需要添加uploader.files.push(file)到我们的FilesAdded绑定(bind)中即可。和瞧。当我们单击开始时,仅发送正确的文件。

它正在工作...但不完全是。
我在那里有几个额外的绑定(bind),仅用于调试目的,其中一个绑定(bind)在QueueChanged上。每次发生更改时,这都会记录队列中的文件数量。

我注意到的是,队列中的文件数量实际上并未反射(reflect)出已从队列中删除了文件。

因此,快速的console.log(uploader.files.length)确认了这里还有其他事情。

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

看起来,我注意到开发人员也决定绑定(bind)到该事件,并在init函数中进行此操作。从我的 Angular 来看,这是一个奇怪的选择。但这是他们的选择。

因此,在它们的绑定(bind)内部,它们还具有一个files.push(file),这意味着我们将获取所有文件+数组中正确文件的副本。

注意到绑定(bind)发生在init()函数中,我从绑定(bind)中删除了uploader.files.push(file),将init()调用移到了FilesAdded绑定(bind)之前。现在一切正常。

关于javascript - 从plupload队列中删除文件?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13423572/

10-12 00:16
查看更多