前端文件断点续传,js文件断点续传

　　HTML5的文件api有一个slice方法，可以划分BLOB对象。通过前端的FileList对象获取对应的文件，按照指定的分割方法对大文件进行分割，然后一个一个的传递给后端，后端会对文件进行一个一个的拼接。

　　断点续传原理

　　目前常用的断点续传方法有两种，一种是通过websocket接口上传文件，另一种是通过ajax上传文件。虽然websocket听起来很高端，但是除了协议不同，其他算法基本相似，服务器需要开放ws接口。这里用相对方便的ajax来说明断点上传的思路。

　　说白了，断点续传的核心内容就是将文件“切片”，然后一个一个的发送到服务器，但是这个看似简单的上传过程却有着无数的漏洞。

　　首先是文件的识别，一个文件分成几块后怎么告诉服务器你切了几块，服务器最后应该怎么合并你上传的文件，这些都是要考虑的。

　　所以在文件开始上传之前，我们要和服务器有一个“握手”的过程，告诉服务器文件信息，然后和服务器约定切片的大小。与服务器达成共识后，就可以开始后续的文件传输了。

　　前台应该将每个文件传递给后台。成功后，应该为后续断点标识前端和后端。

　　当文件传输中断时，用户可以通过再次选择文件来判断文件的一部分是否已经上传。如果是这样，我们可以按照上次的进度继续上传文件，实现连续传输的功能。

　　文件的前端切片

　　有了HTML5的文件api，剪切文件比想象中容易多了。

　　就用切片法吧。

　　var packet=file.slice(start，end)；参数start是切片开始的位置，end是切片结束的位置。单位都是字节。通过控制开始和结束，可以阻止实现文件。

　　比如：

　　file.slice(0，1000)；file.slice(1000，2000)；file.slice(2000，3000)；//.文件片段的上传

　　上次我们用切片的方法把文件分成了几块。接下来要做的是将这些片段传输到服务器。

　　这里，我们使用ajax的post请求来实现。

　　var xhr=new XMLHttpRequest()；var=XXX//文件上传的地址可以包含文件的参数，如文件名、块数等。以便于xhr.open(POST ，url，true)的后台处理；Xhr.onload=function (e){ //判断文件是否上传成功，如果是，继续上传下一块，如果失败，再试一次} xhr。上传。on progress=function(e){/optional }如果文件的块大小较大，可以通过这个方法判断单个文件的具体上传进度。//e.loaded .已经上传了多少个文件。//e.totalSize} xhr.send(数据包)；文件上传到后台后，PHP等后台程序会进行相应的处理。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。