怎么写html5断点上传文件的测试用例

主要思路就是将文件切分，然后分块上传。

html5 里面有读取文件分割文件的类库，所以才可以支持断点上传，所以这个只能在html5 支持的浏览器上面展示。

同时，在js 和 java 同时使用 cr32 进行文件块的校验，保证数据上传正确。

代码在使用了最新的servlet 3.0 的api，使用了异步执行，监听等方法。

http://www.open-open.com/lib/view/1420970480875

无组件断点续传.gif

1. 组件简介

webuploader：是一个以HTML5为主， Flash为辅的文件上传组件，采用大文件分片/并发上传的方式，极大地提高了文件上传的效率，同时兼容多种浏览器版本；

2. 项目背景简介

本篇文章的背景，是在上一篇文章(《无组件实现大文件分片上传，断点续传》)的项目背景下进行的一次尝试，所以本篇文章还是基于上一篇文章的背景，但是不会介绍视频基本信息(视频标题、简介、播出时间等)的 *** 作，主要介绍文件的上传。因为项目的特殊需求，这种使用插进的方式最终没有被采用，因为一些控件无法做到定制化。

上一篇文章(《无组件实现大文件分片上传，断点续传》)中介绍的文件上传方式，在前端主要采用纯JavaScript来进行文件切分、验证，后台主要采用了NIO的方式进行分片的追加。而在这篇文章中，将介绍前端采用webuploader，后台采用临时目录+传统I/O方式进行分片合并的方式。

3. 技术实现

3.1 组件引入

在webuploader官网下载必要的文件，放入项目中。在页面中进行引入；

0_组件引入.png

<!-- webuploader文件上传 -->

<script src="static/webuploader/webuploader.nolog.min.js"></script>

<link href="static/webuploader/webuploader.css" rel="stylesheet" type="text/css" />

3.2 前端页面实现

在前端页面中，可以不用关心css样式，但需要注意标签的id/nama属性，这些将在后面的JavaScript中使用到。

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

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

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

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

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

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

---