html 文件上传与移除,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