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

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

WebUploader 解决文件多次上传和删除上传文件的问题的更多相关文章

  1. C# 选择文件、选择文件夹、打开文件(或者文件夹) 路径中获取文件全路径、目录、扩展名、文件名称 追加、拷贝、删除、移动文件、创建目录 修改文件名、文件夹名!!

    https://www.cnblogs.com/zhlziliaoku/p/5241097.html 1.选择文件用OpenDialog OpenFileDialog dialog = new Ope ...

  2. 解决winscp中普通用户无法上传、删除、移动文件

    上一篇博客中提到了winscp这个软件,这个软件可以利用sftp协议对linux服务器就行连接,然后方便我们对文件进行操作,但是如果是利用普通用户进行登陆的话,在对文件进行相关操作的时候会出现一些pe ...

  3. angularJs 多文件动态上传(删除其中一个文件的时候,要么file没被删除,要么删除了之后,点击事件失效)

    <div cacModule.controller('CacScriptEditCtrl', CacScriptEditCtrl); CacScriptEditCtrl.$inject = [' ...

  4. shell定期转移日志文件到云盘并定期删除云盘文件

    shell 脚本定期处理如下: cat /home/backup/logs_delete.sh #!/bin/bash /bin/find /data/logs/nginx/ -name " ...

  5. Inno如何在安装完成时删除指定的文件夹(下的所有文件及子目录)??

    删除安装目录下的任意文件夹及下的所有文件及子目录,或者删除指定目录的文件夹,要如何做到呢?谢谢!! //删除文件    用 DeleteFile 只能删除一个文件,不能使用通配符来删除多个文件Dele ...

  6. windows C++删除非空文件夹

    //add by zhuxy 递归删除文件夹 BOOL myDeleteDirectory(CString directory_path) //删除一个文件夹下的所有内容 { BOOL ret=TRU ...

  7. webuploader解决不能重复上传问题及一些常见问题处理

    uploader = WebUploader.create({ swf: 'resources/js/webuploader-0.1.5/Uploader.swf', // 文件接收服务端. serv ...

  8. 解决IIS7.0服务和用户上传的文件分别部署在不同的电脑上时,解决权限的问题

    为解决IIS服务和用户上传的文件分别部署在不同的电脑上时,解决权限的问题. 定义: A:iis服务器 B:文件服务器 步骤: 1.在B上创建一个用户[uploaduser](并设置密码) 2.给B上的 ...

  9. 功能强大的文件上传插件带上传进度-WebUploader

    WebUploader是由Baidu WebFE(FEX)团队开发的一个以HTML5/FLASH构建的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用老 ...

随机推荐

  1. HDU 5421 Victor and String(回文树)

    Victor and String Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 524288/262144 K (Java/Othe ...

  2. 基于GTID的主从架构异常处理流程

    通常情况下我们主库的binlog只保留7天,如果从库故障超过7天以上的数据没有同步的话,那么主从架构就会异常,需要重新搭建主从架构. 本文就简单说明下如何通过mysqldump主库的数据恢复从库的主从 ...

  3. Create a Group Policy Central Store

    一.How to create a Group Policy Central Store You have downloaded or created your own Group Policy Ad ...

  4. 原!findbugs:NP_NULL_ON_SOME_PATH_FROM_RETURN_VALUE 和 OBL_UNSATISFIED_OBLIGATION

    改findbogs碰到的两个问题,一个是关于IO流,一个是关于空指针检查异常. 1.NP_NULL_ON_SOME_PATH_FROM_RETURN_VALUE 前面代码略... File crFil ...

  5. Pandas 通过追加方式合并多个csv

    常用合并 通常用pandas进行数据拼接.合并的方法有: pandas.merge() pandas.concat() pandas.append() 还有一种方式就是通过 pd.to_csv() 中 ...

  6. Flask(5)- Flask-Session组件、WTForms组件、数据库连接池(POOL)

    一.Flask-Session 我们使用过flask内置的session,知道它是把session存放在浏览器,即客户端.今天要学习的flask-session是flask的第三方组件,看一下它和fl ...

  7. 0409-服务注册与发现-Eurek Ribbon Feign常见问题及解决

    一.Eureka 1.1.Eureka Environment的配置: eureka.environment: 字符串 参考文档: https://github.com/Netflix/eureka/ ...

  8. idea导入项目出现Unable to import maven project: See logs for details提示(转载)

    摘要: 从git上面check多工程项目后,maven不能正常下载相应的依赖,最后查询国外网站,找出错误原因.按照此步骤,可以自动配置好每个工程的module. 删除项目根目录下.idea文件夹 关闭 ...

  9. 简明python教程六----编写一个python脚本

    备份程序: #!/usr/bin/python #Filename:backup_ver1.py import os import time source = ['/home/liuxj/python ...

  10. tomcat web工程 jar包冲突解决方法

    目前在部署工程时,遇到了一个问题,报错信息如下: See Servlet Spec 2.3, section 9.7.2. Offending class: javax/servlet/Servlet ...