发布网友 发布时间:2022-04-20 01:53
共2个回答
懂视网 时间:2022-04-20 06:14
HTML5的FILE api,有一个slice方法,可以将BLOB对象进行分割。前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段将文件进行拼接。断点续传原理
目前比较常用的断点续传的方法有两种,一种是通过websocket接口进行文件上传,另一种是通过ajax,两种方法各有千秋,虽然websocket听起来比较高端些,但是除了用了不同的协议外其他的算法基本上都是很相似的,并且服务端要开启ws接口,这里用相对方便的ajax来说明断点上传的思路。
说来说去,断点续传最核心的内容就是把文件“切片”然后再一片一片的传给服务器,但是这看似简单的上传过程却有着无数的坑。
首先是文件的识别,一个文件被分成了若干份之后如何告诉服务器你切了多少块,以及最终服务器应该如何把你上传上去的文件进行合并,这都是要考虑的。
因此在文件开始上传之前,我们和服务器要有一个“握手”的过程,告诉服务器文件信息,然后和服务器约定切片的大小,当和服务器达成共识之后就可以开始后续的文件传输了。
前台要把每一块的文件传给后台,成功之后前端和后端都要标识一下,以便后续的断点。
当文件传输中断之后用户再次选择文件就可以通过标识来判断文件是否已经上传了一部分,如果是的话,那么我们可以接着上次的进度继续传文件,以达到续传的功能。
文件的前端切片
有了HTML5 的 File api之后切割文件比想象的要简单的多。
只要用slice 方法就可以了
var packet = file.slice(start, end);
参数start是开始切片的位置,end是切片结束的位置 单位都是字节。通过控制start和end 就可以是实现文件的分块
如:
file.slice(0,1000); file.slice(1000,2000); file.slice(2000,3000); // ......
文件片段的上传
上一部我们通过slice方法把文件分成了若干块,接下来要做的事情就是把这些碎片传到服务器上。
这里我们用ajax的post请求来实现
var xhr = new XMLHttpRequest(); var url = xxx // 文件上传的地址 可以包括文件的参数 如文件名称 分块数等以便后台处理 xhr.open('POST', url, true); xhr.onload = function (e){ // 判断文件是否上传成功,如果成功继续上传下一块,如果失败重试该快 } xhr.upload.onprogress = function(e){ // 选用 如果文件分块大小较大 可以通过该方法判断单片文件具体的上传进度 // e.loaded 该片文件上传了多少 // e.totalSize 该片文件的总共大小 } xhr.send(packet);
文件上传到后台后,后台程序如PHP会做出相应的处理。
热心网友 时间:2022-04-20 03:22
其实断点续传的原理很简单,就是在Http的请求上和一般的下载有所不同而已。 打个比方,浏览器请求服务器上的一个文时,所发出的请求如下: 假设服务器域名为w www.sjtu.e.cn,文件名为down.zip。 GET /down.zip HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms- excel, application/msword, application/vnd.ms-powerpoint, */* Accept-Language: zh-cn Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0) Connection: Keep-Alive 服务器收到请求后,按要求寻找请求的文件,提取文件的信息,然后返回给浏览器,返回信息如下: 200 Content-Length=106786028 Accept-Ranges=bytes Date=Mon, 30 Apr 2001 12:56:11 GMT ETag=W/"02ca57e173c11:95b" Content-Type=application/octet-stream Server=Microsoft-IIS/5.0 Last-Modified=Mon, 30 Apr 2001 12:56:11 GMT 所谓断点续传,也就是要从文件已经下载的地方开始继续下载。所以在客户端浏览器传给 Web服务器的时候要多加一条信息--从哪里开始。 下面是用自己编的一个"浏览器"来传递请求信息给Web服务器,要求从2000070字节开始。 GET /down.zip HTTP/1.0 User-Agent: NetFox RANGE: bytes=2000070- Accept: text/html, image/gif, image/jpeg, *; q=.2, */*; q=.2 仔细看一下就会发现多了一行RANGE: bytes=2000070- 这一行的意思就是告诉服务器down.zip这个文件从2000070字节开始传,前面的字节不用传了。 服务器收到这个请求以后,返回的信息如下: 206 Content-Length=106786028 Content-Range=bytes 2000070-106786027/106786028 Date=Mon, 30 Apr 2001 12:55:20 GMT ETag=W/"02ca57e173c11:95b" Content-Type=application/octet-stream Server=Microsoft-IIS/5.0 Last-Modified=Mon, 30 Apr 2001 12:55:20 GMT 和前面服务器返回的信息比较一下,就会发现增加了一行: Content-Range=bytes 2000070-106786027/106786028 返回的代码也改为206了,而不再是200了。 知道了以上原理,就可以进行断点续传的编程了。