web uploader 上傳大文件總結(jié)

zhiwei 發(fā)布于2019-08-23 16:57 / 2824人閱讀

摘要：大文件上傳主要分為三部分，預(yù)上傳，分塊上傳，合并上傳。可以擴展此對象來控制上傳頭部。是完成最終的大文件合并上傳。修改可以控制發(fā)送哪些攜帶數(shù)據(jù)。

由于業(yè)務(wù)需要，需要上傳大文件，已有的版本無法處理IE版本，經(jīng)過調(diào)研，百度的 webuploader 支持 IE 瀏覽器，而且支持計算MD5值，進(jìn)而可以實現(xiàn)秒傳的功能。

大文件上傳主要分為三部分，預(yù)上傳，分塊上傳，合并上傳。

預(yù)上傳：計算MD5值，同時獲取服務(wù)器返回的參數(shù)，作為分塊上傳的參數(shù)

分塊上傳：對文件按照固定的大小進(jìn)行分塊，分塊后并上傳塊，其中參數(shù)包含預(yù)上傳計算的MD5值，如果上傳的分塊已經(jīng)存在，則跳過執(zhí)行，如果不存在，則執(zhí)行分塊上傳。

合并上傳：當(dāng)所有的分塊完成上傳后，對文件進(jìn)行合并上傳。

其中，用到beforeSendFile，afterFileSend這兩個監(jiān)聽函數(shù)，其中，監(jiān)聽函數(shù)beforeSendFile，主要是計算MD5值，同時進(jìn)行預(yù)上傳，用到defered，是為了等待異步執(zhí)行的結(jié)果。uploadBeforeSend與beforeSendFile對應(yīng)，uploadBeforeSend主要有以下功能：

默認(rèn)的上傳參數(shù)，可以擴展此對象來控制上傳參數(shù)。

可以擴展此對象來控制上傳頭部。

當(dāng)某個文件的分塊在發(fā)送前觸發(fā)，主要用來詢問是否要添加附帶參數(shù)，大文件在開起分片上傳的前提下此事件可能會觸發(fā)多次。
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", //文件上傳之前執(zhí)行
  "before-send" : "beforeSend", //文件塊上傳之前執(zhí)行
  "after-send-file" : "afterSendFile", //上傳完成之后執(zhí)行
},
{
//時間點1：所有進(jìn)行上傳之前調(diào)用此函數(shù)
beforeSendFile : function(file) {
    console.log(file);
    var owner = this.owner
    var deferred = WebUploader.Deferred();
    // 計算文件的唯一標(biāo)識，用于斷點續(xù)傳和妙傳
    (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 = {
          //文件唯一標(biāo)記
          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 {
                //分塊不存在或不完整，重新發(fā)送該分塊內(nèi)容
                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();
},
//每一個分塊發(fā)送之前執(zhí)行該操作,檢查當(dāng)前塊是否已經(jīng)上傳
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, //重傳次數(shù)
  threads: 1, //同時上傳進(jìn)程
  fileSizeLimit: 2000*1024*1024, //驗證文件總大小
  fileSingleSizeLimit: 2000*1024*1024, //驗證單個文件大小
  resize: false,
});
//當(dāng)文件添加進(jìn)隊列
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 +
"等待上傳...
");
});
//文件上傳過程中創(chuàng)建進(jìn)度條
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("上傳完成")
}
});
//發(fā)送前填充數(shù)據(jù)
uploader.on("uploadBeforeSend", function( block, data ) {
    // block為分塊數(shù)據(jù)。
    console.log(block);
    console.log(data);
    var deferred = WebUploader.Deferred();
    // file為分塊對應(yīng)的file對象。
    var file = block.file;
    var fileMd5 = file.fileMd5;
    // 修改data可以控制發(fā)送哪些攜帶數(shù)據(jù)。
    // 將存在file對象中的md5數(shù)據(jù)攜帶發(fā)送過去。
    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("上傳完成")
});

云服務(wù)器 GPU云服務(wù)器 web文件上傳服務(wù)器大文件上傳 java_web文件上傳大文件斷點上傳

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103565.html

發(fā)表評論

登陸后可評論

0條評論

zhiwei

男|高級講師

我要關(guān)注我要私信

TA的文章

unet

閱讀 1572·2023-04-26 00:25
傳說中程序員都是直男，程序員適合做老公嗎？

閱讀 950·2021-09-27 13:36
Codepen 每日精選（2018-3-26）

閱讀 957·2019-08-30 14:14
《第40天 : JQuery - 手風(fēng)琴列表》

閱讀 2209·2019-08-29 17:10
css3重要語法匯總

閱讀 1035·2019-08-29 15:09
web app遇到的一些坑及小技能（持續(xù)更新...）

閱讀 1975·2019-08-28 18:21
網(wǎng)頁動畫性能日志（一）

閱讀 996·2019-08-26 13:27
前端技術(shù)日志 | 19年8月21日 | 新的 React DevTools 介紹

閱讀 999·2019-08-26 10:58

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

web uploader 上傳大文件總結(jié)

相關(guān)文章

從0到1學(xué)習(xí)Flink》—— 你上傳的 jar 包藏到哪里去了?

Ajax上傳多文件

**在Vue項目中使用WebUploader實現(xiàn)文件上傳**

**在Vue項目中使用WebUploader實現(xiàn)文件上傳**

**在Vue項目中使用WebUploader實現(xiàn)文件上傳**

發(fā)表評論

0條評論

zhiwei

男|高級講師

TA的文章

unet

傳說中程序員都是直男，程序員適合做老公嗎？

Codepen 每日精選（2018-3-26）

《第40天 : JQuery - 手風(fēng)琴列表》

css3重要語法匯總

web app遇到的一些坑及小技能（持續(xù)更新...）

網(wǎng)頁動畫性能日志（一）

前端技術(shù)日志 | 19年8月21日 | 新的 React DevTools 介紹

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

web uploader 上傳大文件總結(jié)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！