webuploader 获取文件md5_.NET Core+WebUploader实现大文件分片上传

原标题：.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 = $( '

'+

'

'+

'

'+

'

').appendTo($li).find( '.progress-bar');

}

$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格式的视频文件