java web 断点上传文件_webuploader实现文件断点分片并发上传实例

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。采用大文件分片并发上传，极大的提高了文件上传效率。(这个是从官网上直接copy的解释)

由于要做一个大文件上传，上传的文件支持几G以上，还要支持断点续传，就在网上找了一些资料。发现了几个功能还可以，这里先上传这个。由于网上好多代码不全，自己就结合网上的一些blog和官网的资料，代码终于跑起来了，还有一些功能需要扩展，比如使用数据库保存上传的进度，前台展示，下次上传不需要重新上传等等。下面直接上代码：

1.前端代码

webuploader上传

选择文件

开始上传

var fileMd5;

var $list=$("#thelist");

var state = 'pending';//初始按钮状态

var $btn=$("#btn");

//监听分块上传过程中的三个时间点

WebUploader.Uploader.register({

"before-send-file" : "beforeSendFile",

"before-send" : "beforeSend",

"after-send-file" : "afterSendFile",

}, {

//时间点1：所有分块进行上传之前调用此函数

beforeSendFile : function(file) {

var deferred = WebUploader.Deferred();

//1、计算文件的唯一标记，用于断点续传

(new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024)

.progress(function(percentage) {

$('#' + file.id).find("p.state").text("正在读取文件信息...");

}).then(function(val) {

fileMd5 = val;

$('#' + file.id).find("p.state").text("成功获取文件信息...");

//获取文件信息后进入下一步

deferred.resolve();

});

return deferred.promise();

},

//时间点2：如果有分块上传，则每个分块上传之前调用此函数

beforeSend : function(block) {

var deferred = WebUploader.Deferred();

$.ajax({

type : "POST",

url : "video?action=checkChunk",

data : {

//文件唯一标记

fileMd5 : fileMd5,

//当前分块下标

chunk : block.chunk,

//当前分块大小

chunkSize : block.end - block.start

},

dataType : "json",

success : function(response) {

if (response.ifExist) {

//分块存在，跳过

deferred.reject();

} else {

//分块不存在或不完整，重新发送该分块内容

deferred.resolve();

}

}

});

this.owner.options.f