大文件上传插件webupload插件

一、页面html代码
< div id= "bid_file_ms" class= "uploader-list" > div >
< div class= "btns" >
< div id= "bid_file" > div >
< input type= "button" value= "上传" id= "bid_file_bt" class= "btn btn-default btn-uploadstar radius ml-10" />
div >

ps:
1、bid_file_ms 为上传时展示的信息和进度条div
2、bid_file 为插件绑定div
3、bid_file_bt 位上传按钮


实例化创建插件
大文件上传插件webupload插件_第1张图片
ps 1、因为项目一个页面有两个上传的地方所以会实例化webupload插件两次,为了避免重复讲实例化webupload的名字进行了拼装并用 window [ uploader ]来接收


当有文件添加进来时出发的方法(因为项目每个上传只能上传并存在一个文件所以,再次上传时对插件队列已有文件根据文件id进行移除操作)
大文件上传插件webupload插件_第2张图片

当文件上传过程中触发方法同时实现进度条
大文件上传插件webupload插件_第3张图片
上传成功发送通知给服务器,进行分块文件的合并
大文件上传插件webupload插件_第4张图片
上传出错触发
大文件上传插件webupload插件_第5张图片

二、后台代码

上传保存文件方法(分块也是这里)
大文件上传插件webupload插件_第6张图片

分块合并和断点续传后台方法(因为文件合并比较耗时,所以用线程来执行的文件合并操作)
大文件上传插件webupload插件_第7张图片

ps:webupload的断点续传就是根据分块来实现的 ,大概讲下插件实现断点续传的原理
1.页面上插件,再上传文件前对文件进行md5计算
大文件上传插件webupload插件_第8张图片
2.插件将文件分成若干块,在进行文件块上传前去后台验证此文件的md5文件夹下是否有分块内容
(后台存储的文件分块规则是,用文件的MD5值创建一个文件夹,并在这个文件下存储文件分块,每个文件分块的名字是webupload插件按照数字顺序命名的,从0开始,webupload插件保证了文件分块的规则和命名的相同)
大文件上传插件webupload插件_第9张图片
3.在文件分块上传完成后,发送信息给后台通知进行文件合并(因为有2出未见上传公共调用的方法,所以没有在这里写合并通知,而是在 uploadSuccess这里写的合并通知

至此断点续传原理实现完成,下面会把用到的js和后台java类送上


http://download.csdn.net/download/q11825950/10154145

webupload还有些其他方法就需要自己探索了,以上内容基本实现了分块上传,断点续传,进度条,合并分块等功能

你可能感兴趣的:(大文件上传)