zoukankan      html  css  js  c++  java
  • 使用WebUploader实现文件批量上传,进度条显示功能

    知识点:利用WebUploader,实现文件批量上传,并且实时显示文件的上传进度

    参考官方文档:http://fex.baidu.com/webuploader/

       (1)引入三个资源 JS,CSS,SWF

    webuploader.jswebuploader.css,Uploader.swf

    (2)初始化Web Uploader
    uploader = WebUploader.create({

    // swf文件路径
    swf: '/static/swf/Uploader.swf',

    // 文件接收服务端接口
    server: '/screen/upload',

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建,可能是input元素,也可能是flash.
    pick: {
    //picker为页面上传文件按钮 div的id名称
    id:'#picker',
    //是否允许单次上传时同时选择多个文件
    multiple:true
    },
    //[可选] [默认值:undefined] 验证文件总数量, 超出则不允许加入队列。
    //上传文件总数限制
    fileNumLimit: 20,
    //fileSingleSizeLimit {int} [可选] [默认值:undefined] 验证单个文件大小是否超出限制, 超出则不允许加入队列
    //上传的单个文件大小限制
    //500M,暂时针对视频(字节为单位)
    fileSingleSizeLimit:500*1024*1024,
    method:'POST',
    //允许上传文件的类型
    accept: {
    title: 'file',
    extensions: 'jpg,bmp,png,mp4,flv'
    },


    // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
    resize: false,
    //可否可以重复上传相同文件(如果为true,则相同文件可以重复上传)
    duplicate: true
    });

    (3)上传进度,成功失败事件,可参考官方demo,或者本人demo,在原基础上修改
  • 相关阅读:
    小程序 的授权登陆
    ant desgin pro 项目中的 数据流方案
    new Date() 日期格式处理
    小程序手写 的选择日期 区间
    小程序中的slot(插槽)
    微信小程序实现城市选择和城市切换
    微信小程序 使用页面栈 修改上一个页面的data数据
    2021/2/25
    2021/2/24
    2021/2/23
  • 原文地址:https://www.cnblogs.com/shuaifing/p/9579159.html
Copyright © 2011-2022 走看看