如何实现HTML5文件断点续传

实现HTML5文件断点续传

成都创新互联-专业网站定制、快速模板网站建设、高性价比襄州网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式襄州网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖襄州地区。费用合理售后完善，10余年实体公司更值得信赖。

一、实现文件多选

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

断点续传

1、文件过大会导致带宽资源紧张，请求速度下降 ；

2、如果上传过程中服务中断、网络中断 、页面崩溃，可能会导致文件重新开始上传。

前端选择文件后上传，后端在处理文件过程中，首先会将文件加载到 运行内存中 ，之后再调用相应的API进行 写入硬盘 内存的操作，完成整个文件的上传。

但这样直接上传文件，可能会因为某个环节出了问题导致整个流程的雪崩，所以大文件直接上传是不可取的。

解决问题最好办法是 分片断点续传 ，该方式主要是针对 大文件（比如100M以上的文件） 。

顾名思义就是 断点 和 续传

在文件上传过程中，将一个要上传的文件 分成N块 ，然后使用 多线程并发多块上传 ，因为某种原因导致上传被中断或暂停，此时中断或暂停的位置就成为 断点 。

前端每上传一片，将会被加载到 运行内存中 ，加载完毕后再写入硬盘，此时运行内存的临时变量会被释放，然后此临时变量会被下一片占用，再进行写入，释放...

意思是指从中断的位置继续上传剩下的部分文件，而不是从头开始上传。

上传完毕后，在服务端进行合并（合并的操作是在后端进行的，前端只是调用接口，合并的方式是由后端决定的，到底是上传一片就合并一片，或者是上传所有的之后整体进行合并）。

方式：

html5z之前的方式是 flash 和 activeX

html5提供了文件二进制流进行分割的slice方法。

文件的分片，一般在2-5M之间。这一步得到了每一片文件的内容、每一块的序号、每一块的大小、总块数等数据。

这里提供了两个方法；一种是用SparkMD5.hashBinary( ) 直接将整个文件的二进制码传入直接返回文件的md5、这种方法对于小文件会比较有优势——简单并且速度快。

另一种方法是利用js中File对象的slice( )方法（File.prototype.slice( )）将文件分片后逐个传入spark.appendBinary( )方法来计算、最后通过spark.end( )方法输出结果，很明显，这种方法对于大型文件会非常有利——不容易出错，并且能够提供计算的进度信息

第一种方式：

第二种方式

jsp 在html5中实现 断点续传 进度条 ？要完成的案例，包括 jsp servlet

可以把进度信息放在cookie里，下次打开浏览器，到上传页面以后，从cookie中上次的读取进度信息，上传时，读取上传文件到上次进度位置，继续上传

vue文件分片上传,断点续传如何实现？

首先需要明确，上传这东西不仅仅是只需要前端就能完成的很好的，需要前端后端统一数据格式，从而实现断点续传。（所以，该文适合于全栈工程师，至少是想成为）

还有，为什么需要分片，不分片能实现断点续传吗？分片是为了充分利用网络带宽，加快上传速度；不分片也是能够实现断点续传的。详细参考 HTML5文件上传组件深度剖析.

分片上传与断点续传之间没有很直接的关系.

实现断点续传的前提是需要服务器记录某文件的上传进度，那么根据什么判断是不是同一个文件呢？可以利用文件内容求md5码，如果文件过大，求取md5码也是一个很长的过程，所以对于大文件，只能针对某一段数据进行计算，加上服务器对cookie用户信息的判断，得到相对唯一的key。

在前端页面，需要将文件按照一定大小进行分片，一次请求只发送这一小片数据，所以我们可以同时发起多个请求。但一次同时请求的连接数不宜过多，服务器负载过重。对于文件分片操作，H5具有十分强大的File API，直接利用File对象的slice方法即可得到Blob对象。

至于同时传输数据的连接数控制逻辑，就需要花点脑子思考了。前端把数据顺利得传给服务器了，服务器只需要按照数据中给的开始字节位置，与读取到的文件片段数据，写入文件即可

分享文章：断点续传html5,断点续传百度云
文章出自：http://chengdu.cdxwcx.cn/article/dsddcci.html