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

文件屡次上传有两种状况:html

1. 上传前的屡次选择web

2. 上传成功后,再次选择spa

 

其实API上,已经有了介绍了,不知道为何有同窗仍是不知道如何作,我来抛砖引玉吧。code

配置项:htm

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

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

将dupliacate设置为true,  容许文件屡次上传blog

其实有了这个配置就能够了,不过uploader有个getFiles方法,这个方法容易上人产生误解,队列

一般会认为getFiles方法 获取的是准备要上传的文件,其实否则。API介绍以下:事件

getFiles

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

返回指定状态的文件集合,不传参数将返回全部状态的文件。rem

这里的状态以下:

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