单文件WebUploader做大文件的分块和断点续传

Posted 2020-10-20 星期九

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单文件WebUploader做大文件的分块和断点续传相关的知识，希望对你有一定的参考价值。

前言：

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以html5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，ios 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。

上面的一段话是来自 http://fex.baidu.com/webuploader/ 的介绍，现在做的项目需要用到大文件的上传，之前没有做过，现有的jquery的uploadify只用于上传图片什么的小文件，查了网上的资料，这个插件好像对于大文件不是很友好，为了安全起见，使用百度的成熟框架，不论是多文件还是单个的大文件都是很好用的，没有很多的问题，关于webuploader的详细介绍看官网就行：

我的项目是javaweb,开发环境是MyEclipse，页面使用jsp

1、先将 webuploader-0.1.5.zip 这个文件下载下来：https://github.com/fex-team/webuploader/releases

根据个人的需求放置自己需要的东西就行，全部放到项目里也可以，下面是我自己需要的东西：

技术分享图片

2、代码部分：分为jsp和servlet部分

1、jsp部分代码：

[html] view plain copy

<script type="text/javascript">
var fileMd5;
//监听分块上传过程中的三个时间点
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){
$(‘#item1‘).find("p.state").text("正在读取文件信息...");
})
.then(function(val){
fileMd5=val;
$(‘#item1‘).find("p.state").text("成功获取文件信息...");
//获取文件信息后进入下一步
deferred.resolve();
});
return deferred.promise();
},
//时间点2：如果有分块上传，则每个分块上传之前调用此函数
beforeSend:function(block){
var deferred = WebUploader.Deferred();
$.ajax({
type:"POST",
url:"<%=basePath%>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.formData.fileMd5 = fileMd5;
deferred.resolve();
return deferred.promise();
},
//时间点3：所有分块上传成功后调用此函数
afterSendFile:function(){
//如果分块上传成功，则通知后台合并分块
$.ajax({
type:"POST",
url:"<%=basePath%>Video?action=mergeChunks",
data:{
fileMd5:fileMd5,
},
success:function(response){
alert("上传成功");
var path = "uploads/"+fileMd5+".mp4";
$("#item1").attr("src",path);
}
});
}
});
var uploader = WebUploader.create({
// swf文件路径
swf: ‘<%=basePath%>scripts/webuploader-0.1.5/Uploader.swf‘,
// 文件接收服务端。
server: ‘<%=basePath%>UploadVideo‘,
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: {id: ‘#add_video‘, <span style="background-color:rgb(255,204,0);">//这个id是你要点击上传文件的id，自己设置就好</span>
multiple:false},
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: true,
auto:true,
//开启分片上传
chunked: true,
chunkSize:10*1024*1024,
accept: {
//限制上传文件为MP4
extensions: ‘mp4‘,
mimeTypes: ‘video/mp4‘,
}
});
// 当有文件被添加进队列的时候
uploader.on( ‘fileQueued‘, function( file ) {
$(‘#item1‘).empty();
$(‘#item1‘).html(‘<div id="‘ + file.id + ‘" class="item">‘+
‘<a class="upbtn" id="btn" onclick="stop()">[取消上传]</a>‘+
‘<p class="info">‘ + file.name + ‘</p>‘ +
‘<p class="state">等待上传...</p></div>‘
);
});
// 文件上传过程中创建进度条实时显示。
uploader.on( ‘uploadProgress‘, function( file, percentage ) {
$(‘#item1‘).find(‘p.state‘).text(‘上传中 ‘+Math.round(percentage * 100) + ‘%‘);
});
uploader.on( ‘uploadSuccess‘, function( file ) {
$( ‘#‘+file.id ).find(‘p.state‘).text(‘已上传‘);
});
uploader.on( ‘uploadError‘, function( file ) {
$( ‘#‘+file.id ).find(‘p.state‘).text(‘上传出错‘);
});
uploader.on( ‘uploadComplete‘, function( file ) {
$( ‘#‘+file.id ).find(‘.progress‘).fadeOut();
});
function start(){
uploader.upload();
$(‘#btn‘).attr("onclick","stop()");
$(‘#btn‘).text("取消上传");
}
function stop(){
uploader.stop(true);
$(‘#btn‘).attr("onclick","start()");
$(‘#btn‘).text("继续上传");
}
</script>