• 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

  • 相关阅读:
    MySQL数据库优化的八种方式(经典必看)
    HTML5之应用缓存---manifest---缓存使用----HTML5的manifest缓存
    ajax方法总结
    十分钟入门less(翻译自:Learn lESS in 10 Minutes(or less))
    MySQL主从复制技术(纯干货)
    table不能遗露了tbody
    DOM 之selection
    DOM 其他一些特性
    CSSOM视图模式
    DOM 节点实例操作
  • 原文地址:https://www.cnblogs.com/hankuikui/p/6908371.html
Copyright © 2020-2023  润新知