webuploader 断点续传
webuploader 实现 断点续传
webuploader是百度开发的上传文件前端控件。可支持html5和flash，因此对浏览器的兼容比较好。因为需要用到ie8，ie8不支持html5，
所以必须支持flash上传。
断点续传原理：
1）将大分件分片上传，比如每次传送3m。
2）后台在上传完毕后将分片上传的文件合并为一个文件。
技术要求：
1）前端页面支持分件拆分读取。html5是支持的。IE早期版本不能支持，可以用flash来替代实现。
实现步骤：
1）页面接受用户传入文件。
2）页面用户点击“上传”。
3）页面将文件的基本信息发送到服务端，包括文件名称，大小，修改时间 或者 文件md5（文件md5可加载三方md5算法，但在前端获取需要花费大量时间），
要求不是很高可以选第一种方案
4）服务端接受请求，根据md5生成目录。
5）页面将即将上传的分片信息（不是分片文件）上传到服务端请求验证，判断是否该分片是否已经上传，已经上传则该分片不再重复上传。
6）页面分片传送文件到服务端。
7）服务端将接受到的分片文件放置在md5目录下。
8）页面分片上传完毕，发送合并请求。
9）服务端接受合并请求，将文件合并后放置到指定目录，然后删除临时md5目录。
10）完毕。
实现方法：
js调用webuploader上传文件，配置为分片上传。
这样可以实现分片上传，但是如果要实现断点续传（比如昨天上传了一部分，关闭浏览器后，今天重新上传的情况），
还需要调用webupload提供的hook（WebUploader.Uploader.register）实现上传前，上传中，上传完成后的事件触发，发送到服务端请求。
代码框架概述：
// uploader 初始化
var uploader = new WebUploader.Uploader({
// 选完文件后，是否自动上传。
//auto: false,
//runtimeOrder: flash,html5, // 优先使用flash上传
// swf文件路径
swf: '/public/lib/webuploader/0.1.5/Uploader.swf',
//是否要分片处理大文件上传。
chunked: true,
// 如果要分片，分多大一片？ 默认大小为5M.
chunkSize: chunkSize,
// 如果某个分片由于网络问题出错，允许自动重传多少次？
chunkRetry: 3,
// 上传并发数。允许同时最大上传进程数[默认值：3]
threads: 1,
// 去重
duplicate: true,
// 文件接收服务端。
server: server_url,
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: {
id: filePicker,
multiple: false
},
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false,
// 上传本分片时预处理下一分片
prepareNextFile: true,
//formData: function(){return {uniqueFileName: '333'};}
formData: {uniqueFileName: uniqueFileName}
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
// 具体逻辑...
});
// 文件上传成功处理。
uploader.on('uploadSuccess', function (file, response) {
// 具体逻辑...
});
// 文件上传失败处理。
uploader.on('uploadError', function (file) {
// 具体逻辑...
});
// 长传完毕，不管成功失败都会调用该事件，主要用于关闭进度条
uploader.on('uploadComplete', function (file) {
// 具体逻辑...
});
/** 实现webupload hook，触发上传前，中，后的调用关键 **/
WebUploader.Uploader.register({
“before-send-file”: “beforeSendFile”, // 整个文件上传前
“before-send”: “beforeSend”, // 每个分片上传前
“after-send-file”: “afterSendFile” // 分片上传完毕
}, {
beforeSendFile: function (file) {
var task = new $.Deferred();
var start = new Date().getTime();
//拿到上传文件的唯一名称，用于断点续传
uniqueFileName = md5(file.name + file.size);
$.ajax({
type: "POST",
url: check_url, // 后台url地址
data: {
type: "init",
uniqueFileName: uniqueFileName,
},
cache: false,
async: false, // 同步
timeout: 1000, //todo 超时的话，只能认为该文件不曾上传过
dataType: "json"
}).then(function (data, textStatus, jqXHR) {
if (data.complete) { //若存在，这返回失败给WebUploader，表明该文件不需要上传
task.reject();
// 业务逻辑...
} else {
task.resolve();
}
}, function (jqXHR, textStatus, errorThrown) { //任何形式的验证失败，都触发重新上传
task.resolve();
});
return $.when(task);
}
, beforeSend: function (block) {
//分片验证是否已传过，用于断点续传
var task = new $.Deferred();
$.ajax({
type: "POST",
url: check_url,
data: {
type: "block",
chunk: block.chunk,
size: block.end - block.start
},
cache: false,
async: false, // 同步
timeout: 1000, //todo 超时的话，只能认为该分片未上传过
dataType: "json"
}).then(function (data, textStatus, jqXHR) {
if (data.is_exists) { //若存在，返回失败给WebUploader，表明该分块不需要上传
task.reject();
} else {
task.resolve();
}
}, function (jqXHR, textStatus, errorThrown) { //任何形式的验证失败，都触发重新上传
task.resolve();
});
return $.when(task);
}
, afterSendFile: function (file) {
var chunksTotal = Math.ceil(file.size / chunkSize);
if (chunksTotal > 1) {
//合并请求
var task = new $.Deferred();
$.ajax({
type: "POST",
url: check_url,
data: {
type: "merge",
name: file.name,
chunks: chunksTotal,
size: file.size
},
cache: false,
async: false, // 同步
dataType: "json"
}).then(function (data, textStatus, jqXHR) {
// 业务逻辑...
}, function (jqXHR, textStatus, errorThrown) {
current_uploader.uploader.trigger('uploadError');
task.reject();
});
return $.when(task);
}
}
});
温馨提示：
- 前端用html5和flash上传时上传的文件修改事件的时区（美国时间和中国事件）可能不一样，自己需要在后台判断处理，不然可能出现错误。
- 如果同一个页面有多个webuploader上传，自己根据业务情况特殊处理，因为WebUploader.Uploader.register是全局的，对每个上传都有影响。