5

我正在尝试限制可以通过 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事件，它永远不会被触发！但是在它输出到控制台console.log('Invalid files detected');之前插入uploader.splice(...，所以该行被调用。

4

2 回答 2

2

短版：调用函数后需要绑定filesAdded事件。init()

我调试的第一步是从 github 18 Nov 2012获取未压缩版本。一旦我有了它，我就可以追踪这个问题。

所以主要问题似乎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绑定中。你瞧。当我们点击开始时，只会发送正确的文件。

它正在工作......但不完全是。
我在那里有几个额外的绑定，只是为了调试目的，其中一个是 on QueueChanged。每次发生更改时，这都会记录队列中的文件数量。

我注意到的是队列中的文件数量实际上并没有反映出队列中有文件被删除。

所以，很快console.log(uploader.files.length)，这证实了这里还有其他事情发生。

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

看着我注意到开发人员也决定绑定到事件，在 init 函数中执行此操作。从我的角度来看，这是一个奇怪的选择。但这是他们的选择。

因此，查看它们的绑定内部，它们也files.push(file)意味着我们正在获取所有文件 + 数组中正确文件的副本。

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

于 2012-11-18T04:32:41.170 回答
-1 
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();
});
于 2014-02-05T10:58:42.617 回答