摘要:大文件上传主要分为三部分,预上传,分块上传,合并上传。可以扩展此对象来控制上传头部。是完成最终的大文件合并上传。修改可以控制发送哪些携带数据。
由于业务需要,需要上传大文件,已有的版本无法处理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("" + file.name + ""); }); //文件上传过程中创建进度条 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("上传完成") });等待上传...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/103565.html
摘要:本篇文章连接是关注我微信公众号另外我自己整理了些的学习资料,目前已经全部放到微信公众号了。你可以加我的微信,然后回复关键字即可无条件获取到。 前言 写这篇文章其实也是知识星球里面的一个小伙伴问了这样一个问题: 通过 flink UI 仪表盘提交的 jar 是存储在哪个目录下? 这个问题其实我自己也有问过,但是自己因为自己的问题没有啥压力也就没深入去思考,现在可是知识星球的付费小伙伴问的...
摘要:简介是由团队开发的一个简单的以为主,为辅的现代文件上传组件。采用大文件分片并发上传,极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。 简介:WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的...
摘要:简介是由团队开发的一个简单的以为主,为辅的现代文件上传组件。采用大文件分片并发上传,极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。 简介:WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的...
摘要:简介是由团队开发的一个简单的以为主,为辅的现代文件上传组件。采用大文件分片并发上传,极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。 简介:WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的...
阅读 1429·2023-04-26 00:25
阅读 860·2021-09-27 13:36
阅读 892·2019-08-30 14:14
阅读 2133·2019-08-29 17:10
阅读 975·2019-08-29 15:09
阅读 1915·2019-08-28 18:21
阅读 923·2019-08-26 13:27
阅读 929·2019-08-26 10:58