大文件上传插件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 位上传按钮

实例化创建插件

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还有些其他方法就需要自己探索了，以上内容基本实现了分块上传，断点续传，进度条，合并分块等功能