之前仿造uploadify写了一个HTML5版的文件上传插件，没看过的伴侣可以点此先看一下~得到了不少伴侣的好评，我本身也用在了项目中，岂论是用户头像上传，还是各类媒体文件的上传，以及各类本性的业务需求，都能得到满足。小小高兴了一把。

  但无论插件再怎么灵活，也难以应付所有的需求，好比，你要上传一个2G的文件。以此刻我们的网速，恐怕再快也得传半小时。要命的是，如果你在上传到90%的时候不小心关失了浏览器，或者是手一抖摁了F5，完了，一切还得从新再来。这种用户体验的确太糟糕了。所以，断点续传就十分有须要了。什么是续传我就不解释了，用QQ传文件这么多年，大家都见过了。

  这里要说的是断点续传都有哪些技术要点。使用传统的表单提交文件或是HTML5的FormData都是将文件“整块”提交，处事端取到该文件后再进行转移、重定名等操纵，因此，无法实时生存文件的已上传部分。而且在http协议下，我们无法连结浏览器与处事真个长连接，不能以文件流的形式来提交。所以要解决的问题具体来讲有以下几点：

对上传的文件进行支解，每次只上传一小片。处事端接收到文件后追加到本来部分，最后合并成完整的文件。

每次上传文件片前先获取已上传的文件巨细，确定本次应切割的位置

每次上传完成后更新已上传文件巨细的记录

标识客户端和处事真个文件，保证不会把A文件的内容追加到B文件上

  在参考了张鑫旭年老的这篇文章后，我将学到的技术应用在了我的插件Huploadify中，告成的添加了断点续传成果。在此将技术和插件都分享给大家。

事情道理/技术要点

  首先的首先，要明确，如果我们有一个10M的文件，每次切割上传1M，那么是需要发10次请求来完成的。在http协议下，只能这么搞。断点上传分三步来完成：

选择一个文件后，获取该文件在处事器上的巨细，通过本地存储或自界说的函数来获取。

按照已上传巨细切割文件，发出n次请求不停向处事器提交文件片，处事端不停追加文件内容

当已上传文件巨细到达文件总巨细时，上传结束 

  首先是文件的支解，HTML5新增了Blob数据类型，并且供给了一个可以支解数据的要领：slice()，其用法和字符串、数组的slice()要领一样，可以截取一个二进制文件的一部分。

  其次是文件片的生存与追加，我后台用PHP写的，先用file_get_contents获取文件的二进制格局，再用file_put_contents每次将文件追加，具体的写法可以参照后面，或者是下载我打包好的文件。

  接下来我们还需要实时生存已上传文件的巨细，以便于下次上传前进行正确切割。使用HTML5的localStorage是一种要领，将已上传的巨细生存在本地，下次上传前先从本地读取。不过这种方法是很局限的，抛开用户可能通过各类管家断根去本地数据不讲，假如用户在A页面上传了一个文件的50%，然后在B页面想把该文件上传到此外一个处所，功效从本地一读文件已上传50%了，直接从51%的位置开始上传了，显然是个错误。问题就在于本地不能存太多的信息，通过File API只能获取到文件的原始名称，无法正确的与处事器上的文件正确匹配。所以真正在项目顶用，还得依靠处事端来生存这些数据。

  关于如何将数据存在处事端，已经前端如何取数据，我不才面会讲到。

  技术要点就上面的那么多了，其实也没有几多技术含量哈~来看看我的插件如何使用吧。

续传成果的使用要领

  文件的引入就不讲了，可参考上一篇关于插件的介绍。关键点是新增的几个配置，先来看一下：

在处事端生存数据

  用户在使用上传的时候可能有各类你意想不到的操纵，这里我阐扬想象描述一下用户可能的行为：

同一台机器使用差别帐号登录，上传同一个文件

文件上传了一部分，然后改削了文件内容，再次上传

文件上传完成100%，再次上传该文件

同一个页面有多个上传按钮，上传同一个文件，或在差别页面上传同一个文件