大文件分片上传

1.先搭个请求架子

var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open('OPST',URL,true);
xhr.upload.addEventListener('progress',function(ev){},false);
xhr.addEventListener('load',function(ev){})
xhr.upload.addEventListener('error',function(ev){});
xhr.send(fd)

2.处理fd，主要是使用了File.slice

// 处理fd
var file  // input得到的
var CHUNK = 1024 * 1024 * 3; //分片大小
var chunkNum = 0 // 第几个分片，初始0
var star = chunkNum * CHUNK； // 初始0
var end = Math.min(star+CHUNK, file.size);
var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
var blob = blobSlice.call(file,star,end);
​
var fd = new FormData();
fd.append('file', blob);

3.处理切片上传成功的load, 整个方法是要封装的。

// 处理切片上传成功的load
var totalChunk = Math.ceil(file.size/CHUNK);
xhr.addEventListener('load',function(ev){
  var data = JSON.parse(this.responseText || this.response);
  if(data.status == 200) {
    if(chunkNum >= totalChunk - 1) {
      //所有切片上传完；
      //通知服务器上传完；
      //上传完动作
    }else {
      chunkNum++;
      //封装代码，再来一次。
    }
    
  }
})

4.处理切片上传过程progress，主要是使用event.lengthComputable,event.loaded

// 处理切片上传过程progress
var uploaded = 0; //上传进度
var upLoadedPercent = 0; //上传百分比
// 上传速度...
xhr.upload.addEventListener('progress',function(ev){
  if(ev.lengthComputable){
    uploaded = start + ev.loaded >= file.size ? file.size : start + ev.loaded; 
    upLoadedPercent = uploaded / file.size * 100
  }
},false);

5.处理切片上传失败error

// 处理切片上传失败error
xhr.upload.addEventListener('error',function(ev){
  //再尝试一次or停止
});