WebUploader 解决文件多次上传和删除上传文件的问题

文件多次上传有两种情况：

1. 上传前的多次选择

2. 上传成功后，再次选择

 

其实API上，已经有了介绍了，不知道为什么有同学还是不知道如何做，我来抛砖引玉吧。

配置项：

• duplicate {Boolean} [可选] [默认值：undefined] 

  去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.

将dupliacate设置为true,  允许文件多次上传

其实有了这个配置就可以了，不过uploader有个getFiles方法，这个方法容易上人产生误解，

通常会认为getFiles方法 获取的是准备要上传的文件，其实不然。API介绍如下：

getFiles

• getFiles() ⇒ Array
• getFiles( status1, status2, status... ) ⇒ Array

返回指定状态的文件集合，不传参数将返回所有状态的文件。

这里的状态如下：

File.Status

文件状态值，具体包括以下几种类型：

• inited 初始状态
• queued 已经进入队列, 等待上传
• progress 上传中
• complete 上传完成。
• error 上传出错，可重试
• interrupt 上传中断，可续传。
• invalid 文件不合格，不能重试上传。会自动从队列中移除。
• cancelled 文件被移除。

就是说，只要我们的uploader对象没有重新创建，那它会保存所有选择的文件，

当然我们也有方法，clear一下， 我们看到有这样的方法：

removeFile

• removeFile( file ) ⇒ undefined
• removeFile( id ) ⇒ undefined
• removeFile( file, true ) ⇒ undefined
• removeFile( id, true ) ⇒ undefined

参数:

• file {File, id}

  File对象或这File对象的id

移除某一文件, 默认只会标记文件状态为已取消，如果第二个参数为 true 则会从 queue 中移除。

当我们调用了一下removeFile方法后，只是标记了一下这个文件的状态，我们用getFiles方法，其实还是可以看到，

这时我们可以再调用方法：

reset

• reset() ⇒ undefined

重置uploader。目前只重置了队列。就可以清除勾选的上传文件了

 

我的做法是，在uploadSuccess事件中，调用removeFile方法，注意这个事件也是针对一个文件的

//成功事件,  针对一个文件
uploader.on('uploadSuccess', function (file, response) {
    
　　uploader.removeFile(file);

});

 

最后在uploadFinished事件中，调用reset方法，再就可清空getfiles了。

// 所有文件上传成功后调用        
uploader.on('uploadFinished', function () {
    //清空队列
     uploader.reset();
});

 

 

附，API地址：http://fex.baidu.com/webuploader/doc/index.html