web--文件上传断点续传

http中，为了减轻服务器负荷，避免DDOS攻击，必须要限制客户端的文件上传大小。
由于服务端对文件上传大小的限制，所以需要对图片进行切块上传，在服务器接收文件块之后拼接成一个整体 使用进度条显示上传进度。
文件操作使用Blob对象，Blob有一个重要的方法是slice，用于对文件切块。
File是Blob对象的子类，File也可以使用slice方法切块

// 设置文件切块大小为1M
const chunkSize=1024*1024;
// upload函数 start处开始上传
function upload(start){
	let file = document.getElementById('file').files[0];
	//判断 是否上传完成
	if(start >= file.ize){
	  return ;
	}
	// 获取文件块的结束位置
	let end = (start + chunkSize > file.size) ? file.size : (start + chunkSize);
	// 使用FormData 将文件切块上传
	let fd = new FormData();
	fd.append('file',file.slice(start,end));
	// 使用XMLHttpRequest发送请求 上传数据
	let xhr  = new XMLHttpRequest();
	xhr.open('post',url,true);
	xhr.send(fd);
	xhr.onload = function(){
		if(xhr.readyState==4 && xhr.status==200){
		  // 此时上传完成一块
		  // 修改进度条上传下一块
		  let progress = document.getElementById('progress');
		  progress.max=file.size;
		  progress.value=end;
		  // 再次调用函数上传下一块
		  upload(end);
		}
	}
}

// 以上只是完成文件上传 切块上传的功能 下面实现断点续传
// 如果突然断网 或 浏览器意外关闭，那么上传的是不完整的文件，
// 只需要在选择文件后根据文件名字向服务器查询一下服务器上相同文件名的大小，
// 然后将开始上传的位置start设置成这个大小即可
// 定义一个初始化函数 选择文件后向服务器查询已上传文件的大小
function init(){
    let file = document.getElementById('file').files[0];
    let xhr = new XMLHttpRequest();
    xhr.open('post',url,true);
    //  向服务器发送选择的文件的名字
    xhr.send(file.name);
    xhr.onreadyStateChange = function(){
    		if(xhr.readyState==4 && xhr.status==200 ){
    		  //将字符串转化为整数 获得服务器上已上传文件的大小
    		  let start = parseInt(this.responseText);
    		  //设置进度条
    		  let progress = document.getElementById('progress');
    		  progress.max = file.size;
    		  progress.value = start;
    		  // 开始上传
    		  upload(start);
    		}
    }
}