Due to business needs, large files need to be uploaded, and existing versions can not handle IE version. After investigation, Baidu's webuploader supports IE browser and calculates MD5 value, which can realize the function of seconds transmission.

Large file upload is mainly divided into three parts, pre-upload, block upload, and combined upload.

Pre-upload: Calculate the MD5 value and get the parameters returned by the server as parameters for block upload

Block upload: Files are divided into blocks according to the fixed size, and then uploaded into blocks. The parameters include the MD5 value calculated by pre-upload. If the uploaded block already exists, the execution is skipped. If it does not exist, the block upload is executed.

Merge upload: When all the blocks are uploaded, the files are uploaded by merge.

Among them, two listening functions, beforeSendFile and afterFileSend, are used. Among them, the listening function beforeSendFile mainly calculates the value of MD5 and preuploads, while defered is used to wait for the result of asynchronous execution. Upload BeforeSend corresponds to beforeSendFile. upload BeforeSend has the following functions:

The default upload parameters can be extended to control the upload parameters.

This object can be extended to control the upload header.

When a block of a file is triggered before sending, it is mainly used to ask whether additional parameters should be added. This event may trigger multiple times if a large file starts to upload the fragments.
After FileSend is the final large file merge upload.

The code is as follows:

var fileMd5; //Save file MD5 name
var uploader; //Global object 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", //Execution before file upload
  "before-send" : "beforeSend", //Execution before file block upload
  "after-send-file" : "afterSendFile", //Execute after upload is completed
},
{
//Time Point 1: Call this function before all uploads are made
beforeSendFile : function(file) {
    console.log(file);
    var owner = this.owner
    var deferred = WebUploader.Deferred();
    // Unique Identification of Computing Files for Continuous and Smart Transfer of Breakpoints
    (new WebUploader.Uploader()).md5File(file, 0,
      10 * 1024 * 1024).progress(
      function(percentage) {
        jQuery("#"+file.id).find("div.state").text("scanning file");
      }).then(
        function(val) {
          fileMd5 = val;
          file.fileMd5 = fileMd5
          jQuery("#"+file.id).find("div.state").text("successfully obtain file information");
          // Release
          var datas = {
          //File Unique Marker
          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("second pass");
              } else {
                //Block does not exist or is incomplete. Re-send the content of the block
                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();
},
//Perform this operation before each block is sent to check whether the current block has been uploaded
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) {
  // Notification merge sub-block
  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('Upload completed');
    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', // This id is the id of the outer div you want to click on the upload file button
    multiple : true //Whether it can be uploaded in batches or not, true can select multiple files at the same time
  },
  auto: true,
  disableGlobalDnd: true, //Disable page dragging
  chunked: true, // Open Slice Upload
  chunkSize: uploadShardSize, //Fragment size
  chunkRetry: 3, //Retransmission times
  threads: 1, //Simultaneous upload process
  fileSizeLimit: 2000*1024*1024, //Verify the total file size
  fileSingleSizeLimit: 2000*1024*1024, //Verify the size of a single file
  resize: false,
});
//When files are added to the queue
uploader.on("fileQueued", function(file) {
  // fileList
  jQuery("#divDialogfileupload").show();
  jQuery("#sexwarning").css("display","block");
  jQuery(".upfile_ul").css("display","block");
  jQuery(".upfile_ul").append("<div id='" + file.id + "'class='fileInfo'><img/><span>" + file.name +
"</span><div class='state'>Waiting for uploading...</div><span class='text'><span></div>");
});
//Create progress bar during file upload
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("Uploading...")
  if (progress == 1) {
  id.find("div.state").text("Upload completed")
}
});
//Fill in data before sending
uploader.on('uploadBeforeSend', function( block, data ) {
    // Block is block data.
    console.log(block);
    console.log(data);
    var deferred = WebUploader.Deferred();
    // File is the file object corresponding to the block.
    var file = block.file;
    var fileMd5 = file.fileMd5;
    // Modifying data can control which carry data to send.
    // Send the md5 data that exists in the file object with it.
    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();
});
//Upload success
uploader.on("uploadSuccess", function(file) {
    var id = jQuery("#"+file.id);
    id.find("div.state").text("Uploaded")
});
//Upload failure
uploader.on('uploadError', function( file ) {
    var id = jQuery("#"+file.id);
    id.find("div.state").text("Upload failure")
});
// Upload completed
uploader.on("uploadComplete", function(file) {
    var id = jQuery("#"+file.id);
    id.find("div.state").text("Upload completed")
});