Question

如何实现HTML5文件断点续传

Answer 1

实现HTML5文件断点续传

一、实现文件多选

HTML5的<input>新增了"multiple"属性，该属性可接受多个值的文件上传字段
<input type="file" multiple="multiple" name="file" id="file">
添加了该属性用户就可以在弹出的对话框中一次性选择多个文件了
二、实现文件从计算机拖拽到网页以及添加文件队列功能
这里我们用 dragover 和 drop 两个事件来管理文件拖拽的功能
其中 dragover 用来处理在指定的元素上移动时的事件，这里我们通过给body绑定dragover时间来处理页面中拖动文件的事件
document.body.addEventListener('dragover', dragFile, false);

function dragFile(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
用 drop 事件来处理鼠标松开时候的事件，此时应该将用户拖动过来的文件加入到上传队列中，以供后续的处理
document.body.addEventListener('drop', dropFile, false);

function dragFile(evt) {
evt.stopPropagation();
evt.preventDefault();
// dataTransfer.files属性可以获取到所有拖动选择的文件，通过遍历可以读取到所有文件的信息。
// 遍历每个文件可以获取到文件的 name、size、type、lastModifiedDate等关键信息
var files = evt.dataTransfer.files;
// addfile 方法 用来添加上传文件队列，在input的change事件中也需要调用
// 该方法首先检查有无文件正在上传中，如果有就将后续加入的文件放到上传队列中，如果没有文件正在上传就直接执行上传命令
addfile(files);
}
三、文件续传原理
目前比较常用的断点续传的方法有两种，一种是通过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请求来实现
textpop-up

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);

Answer 2

其实断点续传的原理很简单，就是在Http的请求上和一般的下载有所不同而已。 打个比方，浏览器请求服务器上的一个文时，所发出的请求如下： 假设服务器域名为w www.sjtu.edu.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 所谓断点续传，也就是要从文件已经下载的地方开始继续下载。所以在客户32313133353236313431303231363533e59b9ee7ad9431333335323362端浏览器传给 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了。 知道了以上原理，就可以进行断点续传的编程了。