使用WebUploader实现文件批量上传，进度条显示功能

时间：2022-12-26 13:00:54

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

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

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

webuploader.js，webuploader.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，在原基础上修改

相关文章