原生JS实现大文件分片
Posted xiaoqingfeng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS实现大文件分片相关的知识，希望对你有一定的参考价值。
//为了实现断点续传，研究了js的文件分片 //实现断点续传的构思 //文件分片按顺序上传，上传第一个后文件名md5加密保存到rdis的key，value保存为上传的index， //然后下面每次上传成功就更新对应的value，保持最新的 //第一次上传时 //查询redis是否已经存在相同的key，如果相同就跳到保存的index的下一个上传 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> var 切片大小=(1024*1024)*1;//确定分片大小 var xmt=new XMLHttpRequest();//axaj请求 function updata(index) {//index是上传标记的序列 var file=document.getElementById("文件").files[0];//获取文件 let {fname ,fext}=file.name.split(\'.\');//获取文件的名字和拓展名 var star=index*切片大小;//切片的起点 if(star>file.size)//判断起点是否已经超过文件的长度，超过说明已经 { return; } var bool=file.slice(star,star+切片大小);//slice（分割起点，分割终点）是js切割文件的函数， var boolname=fname+index+fext var boolfile=new File([bool],boolname)//把分割后的快转成文件传输 var from=new FormData();//定义集合方便后端接收 from.append("切片序列", index); from.append("切片长度", 切片大小); from.append("name",file.name) from.append("file",boolfile); from.append("name",file.name) from.append("file",boolfile); xmt.open("post","/接收文件",true)//发送请求 xmt.send(from)//携带集合 xmt.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { //alert(this.responseText) if ( this.responseText=="上传完成"){//按顺序上传，只有上一片上传成功下一个才能上传 //这里可以加个判断，获取断点，获取后下一个，后端也会判断切片是否已经下载过 updata(++index); document.getElementById("显示").value=star/file.size;//显示上传的进度 } } }; } </script> <body> <div> <input type="file" name="选择文件" id="文件">//获取文件 <input type="button" value="确定" onclick="updata(0)">//点击执行 <br> <input type="text" id="显示">// </div> </body> </html>
以上是关于原生JS实现大文件分片的主要内容，如果未能解决你的问题，请参考以下文章