700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 使用WebUploader实现文件批量上传 进度条显示功能

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

时间:2020-04-22 16:59:27

相关推荐

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

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

参考官方文档:/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,在原基础上修改

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。