WebUploader 解决文件多次上传和删除上传文件的问题
2024-08-31 04:49:31
文件多次上传有两种情况:
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
最新文章
- Uva 1630 折叠串
- 如何使用.NET开发全版本支持的Outlook插件产品(三)——全面控制
- 操作符 Thinking in Java 第三章
- 026. asp.net中将图片以二进制方式保存到数据库并以HTTP流方式输出
- 禁止触屏滑动touchmove方法介绍
- EasyMock问题总结
- html5 requestAnimationFrame制作动画:旋转风车
- 大型高性能ASP.NET系统架构设计
- Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
- string.Join和Reverse的简单使用示例
- CSU 1120 病毒
- UIScreen类
- 推荐JVM的9款编程语言杀手开发利器
- SQLServer 中实现类似MySQL中的group_concat函数的功能
- ASP.NET 5:初始化数据库
- 移动端的弹窗滚动禁止body滚动
- Python人工智能之路 - 第四篇 : jieba gensim 最好别分家之最简单的相似度实现
- WPF的5种绑定模式(mode)
- node使用 log4js
- MySQL常见建表选项及约束