一、页面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 位上传按钮
实例化创建插件
ps 1、因为项目一个页面有两个上传的地方所以会实例化webupload插件两次,为了避免重复讲实例化webupload的名字进行了拼装并用
window
[
uploader
]来接收
当有文件添加进来时出发的方法(因为项目每个上传只能上传并存在一个文件所以,再次上传时对插件队列已有文件根据文件id进行移除操作)
当文件上传过程中触发方法同时实现进度条
上传成功发送通知给服务器,进行分块文件的合并
上传出错触发
二、后台代码
上传保存文件方法(分块也是这里)
分块合并和断点续传后台方法(因为文件合并比较耗时,所以用线程来执行的文件合并操作)
ps:webupload的断点续传就是根据分块来实现的 ,大概讲下插件实现断点续传的原理
1.页面上插件,再上传文件前对文件进行md5计算
2.插件将文件分成若干块,在进行文件块上传前去后台验证此文件的md5文件夹下是否有分块内容
(后台存储的文件分块规则是,用文件的MD5值创建一个文件夹,并在这个文件下存储文件分块,每个文件分块的名字是webupload插件按照数字顺序命名的,从0开始,webupload插件保证了文件分块的规则和命名的相同)
3.在文件分块上传完成后,发送信息给后台通知进行文件合并(因为有2出未见上传公共调用的方法,所以没有在这里写合并通知,而是在
uploadSuccess这里写的合并通知)
至此断点续传原理实现完成,下面会把用到的js和后台java类送上
http://download.csdn.net/download/q11825950/10154145
webupload还有些其他方法就需要自己探索了,以上内容基本实现了分块上传,断点续传,进度条,合并分块等功能