php webuploader大文件,web uploader 上传大文件总结

由于业务需要，需要上传大文件，已有的版本无法处理IE版本，经过调研，百度的 webuploader 支持 IE 浏览器，而且支持计算MD5值，进而可以实现秒传的功能。

大文件上传主要分为三部分，预上传，分块上传，合并上传。

预上传：计算MD5值，同时获取服务器返回的参数，作为分块上传的参数

分块上传：对文件按照固定的大小进行分块，分块后并上传块，其中参数包含预上传计算的MD5值，如果上传的分块已经存在，则跳过执行，如果不存在，则执行分块上传。

合并上传：当所有的分块完成上传后，对文件进行合并上传。

其中，用到beforeSendFile，afterFileSend这两个监听函数，其中，监听函数beforeSendFile，主要是计算MD5值，同时进行预上传，用到defered，是为了等待异步执行的结果。uploadBeforeSend与beforeSendFile对应，uploadBeforeSend主要有以下功能：

默认的上传参数，可以扩展此对象来控制上传参数。

可以扩展此对象来控制上传头部。

当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。

afterFileSend 是完成最终的大文件合并上传。

代码如下：

var fileMd5; //保存文件MD5名称

var uploader; //全局对象uploader

var dfsId;

var uploadId;

var rnd = GC.gRnd();

var uploadShardSize = parent.gMain.isCeph=="1"?5 * 1024 * 1024:4 * 1024 * 1024;

var discussContent = jQuery('#upload_discusscontent');

if (parent.gMain.diskType == 2) {

discussContent.parent().show();

}

WebUploader.Uploader.register({

"before-send-file" : "beforeSendFile", //文件上传之前执行

"before-send" : "beforeSend", //文件块上传之前执行

"after-send-file" : "afterSendFile", //上传完成之后执行

},

{

//时间点1：所有进行上传之前调用此函数

beforeSendFile : function(file) {

console.log(file);

var owner = this.owner

var deferred = WebUploader.Deferred();

// 计算文件的唯一标识，用于断点续传和妙传

(new WebUploader.Uploader()).md5File(file, 0,

10 * 1024 * 1024).progress(

function(percentage) {

jQuery("#" + file.id).find("div.state").text("正在扫描文件") ;

}).then(

function(val) {

fileMd5 = val;

file.fileMd5 = fileMd5

jQuery("#" + file.id).find("div.state").text("成功获取文件信息");

// 放行

var datas = {

//文件唯一标记

fileMd5 : fileMd5,

diskType: parent.gMain.diskType,

appFileId: '',

creatorUsn: parent.gMain.groupUsn,

uploadType: file.chunks == 1 ? 1 : 3,

comeFrom: 11,

parentId: (parent.gMain.currentFid == -2) ? -1 : parent.gMain.currentFid,

fileSize: file.size,

groupId: parent.gMain.groupId,

fileName: file.name,

discussContent: (parent.gMain.diskType == 2) ? discussContent.val() : '',

model: parent.gMain.uploadModel

};

jQuery.ajax({

type : "POST",

url : parent.gConst.ajaxPostUrl.file + "?func=common:upload&sid="+parent.gMain.sid +"&rnd="+rnd,

data: JSON.stringify(datas),

dataType : "json",

success : function(response) {

console.log(response)

if(response && response.code==='DFS_118'){

owner.skipFile( file );

deferred.reject();

jQuery("#" + file.id).find("div.state").text("秒传");

} else {

//分块不存在或不完整，重新发送该分块内容

dfsId = response.var.dfsFileId;

uploadId = response.var.uploadId;

deferred.resolve();

}

},

beforeSend: function (XMLHttpRequest) {

XMLHttpRequest.setRequestHeader("Content-Type", "text/javascript; charset=utf-8");

}

});

});

return deferred.promise();

},

//每一个分块发送之前执行该操作,检查当前块是否已经上传

beforeSend : function(block) {

var deferred = WebUploader.Deferred();

dfsId = dfsId;

deferred.resolve();

this.owner.options.formData = {

fileMd5: fileMd5,

start: block.start

};

return deferred.promise();

},

afterSendFile : function(file) {

// 通知合并分块

console.log(file)

var comepleteData = {

diskType: parent.gMain.diskType,

uploadType: file.blocks ? file.blocks.length == 1 ? 1 : 3 : 1,

creatorUsn: parent.gMain.groupUsn,

parentId: (parent.gMain.currentFid == -2) ? -1 : parent.gMain.currentFid,

fileSize: file.size,

groupId: parent.gMain.groupId,

fileName: file.name,

fileMd5: fileMd5,

comeFrom: 11,

uploadId: uploadId,

dfsFileId: dfsId,

model: parent.gMain.uploadModel,

partCount: file.blocks ? file.blocks.length : 1

}

jQuery.ajax({

type : "POST",

url : parent.gConst.ajaxPostUrl.file+ "?func=common:completeUpload&sid="+parent.gMain.sid,

data: JSON.stringify(comepleteData),

dataType: 'json',

success : function(response) {

var $li = jQuery('#' + file.id);

$li.find('p.state').text('上传完成');

jQuery("#ctlBtn").addClass('disabled');

},

beforeSend: function (XMLHttpRequest) {

XMLHttpRequest.setRequestHeader("Content-Type", "text/javascript; charset=utf-8");

}

});

}

});

uploader = WebUploader.create({

swf: '../resource_drive/js/control/fileupload/Uploader.swf',

server: 'service/common/onestfile.do?func=common:onestUpload&sid=' + parent.gMain.sid,

pick:{

id: '#asd', //这个id是你要点击上传文件按钮的外层div的id

multiple : true //是否可以批量上传，true可以同时选择多个文件

},

auto: true,

disableGlobalDnd: true, //禁用页面拖拽

chunked: true, // 开启分片上传

chunkSize: uploadShardSize, //分片大小

chunkRetry: 3, //重传次数

threads: 1, //同时上传进程

fileSizeLimit: 2000*1024*1024, //验证文件总大小

fileSingleSizeLimit: 2000*1024*1024, //验证单个文件大小

resize: false,

});

//当文件添加进队列

uploader.on("fileQueued", function(file) {

// fileList

jQuery("#divDialogfileupload").show();

jQuery("#sexwarning").css("display","block");

jQuery(".upfile_ul").css("display","block");

jQuery(".upfile_ul").append("

});

//文件上传过程中创建进度条

uploader.on("uploadProgress", function(file, progress){

var id = jQuery("#"+file.id);

id.find("span.text").text((progress.toFixed(2))*100+"%")

id.find("div.state").text("上传中...")

if (progress == 1) {

id.find("div.state").text("上传完成")

}

});

//发送前填充数据

uploader.on('uploadBeforeSend', function( block, data ) {

// block为分块数据。

console.log(block);

console.log(data);

var deferred = WebUploader.Deferred();

// file为分块对应的file对象。

var file = block.file;

var fileMd5 = file.fileMd5;

// 修改data可以控制发送哪些携带数据。

// 将存在file对象中的md5数据携带发送过去。

data.appFileId = "";//md5

data.fileMd5 = fileMd5;//md5

data.fileName = data.name;

data.diskType = parent.gMain.diskType;

data.uploadType = block.chunks == 1 ? 1 : 3;

data.creatorUsn = parent.gMain.groupUsn;

data.parentId = (parent.gMain.currentFid == -2) ? -1 : parent.gMain.currentFid;

data.fileSize = data.size;

data.groupId = parent.gMain.groupId;

data.model = parent.gMain.uploadModel;

data.fileRealPath = block.file.source.source.webkitRelativePath;

data.comeFrom = 11;

data.dfsFileId = dfsId;

data.blob = data.name;

if (block.chunks !== 1) {

data.uploadId = uploadId;

data.range = block.start + "-" + block.end;

data.partCount = block.chunks;

data.partNum = block.chunk + 1;

}

data.discussContent = (parent.gMain.diskType == 2) ? discussContent.val() : '';

deferred.resolve();

});

//上传成功

uploader.on("uploadSuccess", function(file) {

var id = jQuery("#"+file.id);

id.find("div.state").text("已上传")

});

//上传失败

uploader.on('uploadError', function( file ) {

var id = jQuery("#"+file.id);

id.find("div.state").text("上传失败")

});

// 上传完成

uploader.on("uploadComplete", function(file) {

var id = jQuery("#"+file.id);

id.find("div.state").text("上传完成")

});