原标题:.NET Core+WebUploader实现大文件分片上传
转自:踏平扶桑
cnblogs.com/wdw984/p/11725118.html
项目要求通过网站上传大文件,比如视频文件,通过摸索实现了文件分片来上传,然后后台进行合并。
使用了开源的前台上传插件WebUploader
(http://fex.baidu.com/webuploader/)
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。
在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。
采用大文件分片并发上传,极大的提高了文件上传效率。
直接上代码,前台cshtml
@{
Layout = null;
}
>
>
Upload<>
jQuery( function{
var$ = jQuery,
$list = $( '#thelist'),
$btn = $( '#ctlBtn'),
state = 'pending',
fileMd5,
flag = true,
dataState,
fm = [],
fnum,
Token,
uploader;
varFileExt = [ "mpg", "mpeg", "mp4", "avi"];
Token = '@ViewBag.Token';
if(Token == ''|| Token== 'undefined')
{
$( "#uploader").hide;
alert( "登录超时,请重新登录。");
}
//监听分块上传过程中的三个时间点
WebUploader.Uploader.register({
"before-send-file": "beforeSendFile",
"before-send": "beforeSend",
"after-send-file": "afterSendFile",
}, {
beforeSendFile: function(file){
varstartTime = newDate(file.lastModifiedDate);
fileName = file.name;
vardeferred = WebUploader.Deferred;
( newWebUploader.Uploader).md5File(file, 0, 10* 1024* 1024)
.progress( function(percentage){
console.log( "正在读取文件");
})
.then( function(val){
fileMd5 = val;
fm.push(fileMd5);
deferred.resolve;
});
returndeferred.promise;
},
//时间点2:如果有分块上传,则每个分块上传之前调用此函数
beforeSend: function(block){
vardeferred = WebUploader.Deferred;
//上传前ajax检测一下此文件块是否已经上传
this.owner.options.formData.fileMd5 = fileMd5;
this.owner.options.formData.chunk = block.chunk;
deferred.resolve;
returndeferred.promise;
},
//时间点3:所有分块上传成功后调用此函数
afterSendFile: function(file){
vardeferred = $.Deferred;
$( '#'+ file.id).find( 'p.state').text( '执行最后一步');
console.log(file);
console.log(file.guid);
$.ajax({
type: "POST",
url: "/api/v1/Check/FileMerge",
data: {
guid: file.guid,
fileMd5: fm[fnum],
fileName: file.name
},
cache: false,
async: false,
success: function(response){
fnum++;
console.log(response);
if(response.success == true) {
dataState = response;
flag = true;
} else{
flag = false;
}
deferred.resolve;
},
error: function{
fnum++;
dataState = undefined;
flag = false;
deferred.reject;
}
});
returndeferred.promise;
}
});
uploader = WebUploader.create({
resize: false,
fileNumLimit: 10,
swf: '/js/Uploader.swf',
server: '/api/v1/Check/FileSave',
pick: '#picker',
chunked: true,
chunkSize: 10* 1024* 1024,
chunkRetry: 5
//, formData: {
// guid: GUID
//}
});
uploader.on( 'beforeFileQueued', function(file){
varisAdd = false;
for( vari = 0; i < FileExt.length; i++) {
if(file.ext == FileExt[i]) {
file.guid = WebUploader.Base.guid;
isAdd = true;
break;
}
}
returnisAdd;
});
uploader.on( 'uploadBeforeSend', function(object, data, headers){
//console.log(object);
headers.Authorization =Token;
data.guid = object.file.guid;
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function(file){
$list.append( '
'
'+ file.name + '
'+''+
'
等待上传...
'+'
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function(file, percentage){
var$li = $( '#'+ file.id),
$percent = $li.find( '.progress .progress-bar');
// 避免重复创建
if(!$percent.length) {
$percent = $( '
'
'+'
}
$li.find( 'p.state').text( '上传中');
$percent.css( 'width', percentage * 100+ '%');
});
uploader.on( 'uploadSuccess', function(file){
if(dataState == undefined) {
$( '#'+ file.id).find( 'p.state').text( '上传失败');
$( '#'+ file.id).find( 'button').remove;
$( '#'+ file.id).find( 'p.state').before( '重新上传');
flag = false;
file.setStatus( 'error');
}
if(dataState.success == true) {
$( '#'+ file.id).find( 'p.state').text( '已上传');
$( '#'+ file.id).find( 'button').remove;
} else{
$( '#'+ file.id).find( 'p.state').text( '上传失败');
flag = false;
}
});
uploader.on( 'uploadError', function(file){
$( '#'+ file.id).find( 'p.state').text( '上传出错');
});
uploader.on( 'uploadComplete', function(file){
$( '#'+ file.id).find( '.progress').fadeOut;
});
uploader.on( 'all', function(type){
if(type === 'startUpload') {
state = 'uploading';
} elseif(type === 'stopUpload') {
state = 'paused';
} elseif(type === 'uploadFinished') {
state = 'done';
}
if(state === 'done') {
$btn.text( '继续上传');
} elseif(state === 'uploading') {
$btn.text( '暂停上传');
} else{
$btn.text( '开始上传');
}
});
$btn.on( 'click', function{
if(state === 'uploading') {
uploader.stop;
} elseif(state == 'done') {
window.location.reload;
}
else{
uploader.upload;
}
});
});
>
只能上传mpg、mpeg、mp4、avi格式的视频文件