zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    部分和问题
    区间k大数训练
    蓝桥杯基础练习-数列排序
    蓝桥杯基础练习-特殊的回文数
    蓝桥杯基础练习-回文数
    蓝桥杯基础练习-特殊的数字
    蓝桥杯基础练习-杨辉三角
    蓝桥杯基础练习-查找整数
    蓝桥杯题库基础训练-数列特征
    三道半平面交测模板题 Poj1474 Poj 3335 Poj 3130
  • 原文地址:https://www.cnblogs.com/hankuikui/p/6908371.html
Copyright © 2011-2022 走看看