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,在原基础上修改
  • 相关阅读:
    Spring:(八) mybatis-spring整合
    Spring:(七) Aop
    spring boot中@ControllerAdvice的用法
    spring boot中注册拦截器
    spring boot 中通过CORS实现跨域
    spring boot 中的路径映射
    浅析java中的string
    java并发编程如何预防死锁
    Redis集群增加节点和删除节点
    Redis删除集群以及重新启动集群
  • 原文地址:https://www.cnblogs.com/shuaifing/p/9579159.html
Copyright © 2011-2022 走看看