最近在做项目中。需要将手机相册的图片,上传到服务器。很多图片都是超过1MB的。于是就想到了使用Resumable.js .
官方介绍:
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能。在上传大文件的时候通过每个文件分割成小块,
每块在上传失败的时候,上传会不断重试直到程序完成。这允许上传到本地或服务器的网络连接丢失后能够自动恢复上传。
此外,它允许用户暂停,恢复,甚至恢复上传不失状态,因为只有目前上传块将被中止,而不是整个上传。Resumable.js 除了 HTML5 文件 API
意外,没有任何外部依赖。目前,这意味着支持仅限于 Firefox 4+, Chrome 11+ and Safari 6+。
GitHub地址: https://github.com/23/resumable.js/archive/master.zip
直接上项目中的代码:
/**
* 断点续传
*/
web_Uploader: function () {
var r = new Resumable({
target: args.material_breakpoint_url,
agent_id_sjk: args.agent_id //自定义参数
});
r.assignBrowse(document.getElementById('upload_btn'));
r.on('fileSuccess', function (file) {
//todo...
});
r.on('fileProgress', function (file) {
//上传途中 服务器 校验 返回错误
if (args.async_uploader_msg != '') {
json = $.parseJSON(args.async_uploader_msg);
if (json.status == 404) {
//todo...
}
}
var num = Math.floor(r.progress() * 100);
//到98%退出,剩下时间是给后面DOM的操作,以及图片完全加载
if (num >= 98) {
return;
}
$("#lodding_num").text(num + '%');
});
r.on('filesAdded', function (array) {
$("#lodding_text").show().find("#lodding_num").text('0%');
App.lodding('lodding');
r.upload();
});
r.on('fileError', function (file, message) {
layer.msg('文件错误!');
});
r.on('error', function (message, file) {
layer.msg('上传发生错误,请稍后再试!');
});
}