国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

web uploader 上傳大文件總結

zhiwei / 2784人閱讀

摘要:大文件上傳主要分為三部分,預上傳,分塊上傳,合并上傳。可以擴展此對象來控制上傳頭部。是完成最終的大文件合并上傳。修改可以控制發送哪些攜帶數據。

由于業務需要,需要上傳大文件,已有的版本無法處理IE版本,經過調研,百度的 webuploader 支持 IE 瀏覽器,而且支持計算MD5值,進而可以實現秒傳的功能。

大文件上傳主要分為三部分,預上傳分塊上傳合并上傳

預上傳:計算MD5值,同時獲取服務器返回的參數,作為分塊上傳的參數

分塊上傳:對文件按照固定的大小進行分塊,分塊后并上傳塊,其中參數包含預上傳計算的MD5值,如果上傳的分塊已經存在,則跳過執行,如果不存在,則執行分塊上傳。

合并上傳:當所有的分塊完成上傳后,對文件進行合并上傳。

其中,用到beforeSendFileafterFileSend這兩個監聽函數,其中,監聽函數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("上傳完成") });

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103565.html

相關文章

  • 從0到1學習Flink》—— 你上傳的 jar 包藏到哪里去了?

    摘要:本篇文章連接是關注我微信公眾號另外我自己整理了些的學習資料,目前已經全部放到微信公眾號了。你可以加我的微信,然后回復關鍵字即可無條件獲取到。 前言 寫這篇文章其實也是知識星球里面的一個小伙伴問了這樣一個問題: 通過 flink UI 儀表盤提交的 jar 是存儲在哪個目錄下? 這個問題其實我自己也有問過,但是自己因為自己的問題沒有啥壓力也就沒深入去思考,現在可是知識星球的付費小伙伴問的...

    trigkit4 評論0 收藏0
  • Ajax上傳文件

    摘要:我們將教你一個請求上傳多文件的例子。然而,你可以用同樣的辦法上傳單個文件。在功能方面的進步,消除供開發者使用第三方瀏覽器插件來處理文件上傳的需要。 AJAX的采用標志著的Web歷史上的一個巨大飛躍。與Web服務器通信而不需要重新加載頁面的能力已改變了Web應用程序構建。動態網站的概念形成以后,AJAX(XMLHttpRequests) 技術發展迅速。 近年來XMLHttpRequest...

    Warren 評論0 收藏0
  • 在Vue項目中使用WebUploader實現文件上傳

    摘要:簡介是由團隊開發的一個簡單的以為主,為輔的現代文件上傳組件。采用大文件分片并發上傳,極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進度。選擇文件的按鈕。 簡介:WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主,FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮HTML5的優勢,同時又不摒棄主流IE瀏覽器,沿用原來的...

    mindwind 評論0 收藏0
  • 在Vue項目中使用WebUploader實現文件上傳

    摘要:簡介是由團隊開發的一個簡單的以為主,為輔的現代文件上傳組件。采用大文件分片并發上傳,極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進度。選擇文件的按鈕。 簡介:WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主,FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮HTML5的優勢,同時又不摒棄主流IE瀏覽器,沿用原來的...

    endiat 評論0 收藏0
  • 在Vue項目中使用WebUploader實現文件上傳

    摘要:簡介是由團隊開發的一個簡單的以為主,為輔的現代文件上傳組件。采用大文件分片并發上傳,極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進度。選擇文件的按鈕。 簡介:WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主,FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮HTML5的優勢,同時又不摒棄主流IE瀏覽器,沿用原來的...

    funnyZhang 評論0 收藏0

發表評論

0條評論

zhiwei

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<