HTML5实现上传文件

1. 前言

本文主要介绍利用上传文件的总体思路和具体实现，该方法不需要借助其它插件即可实现文件的秒传，断点续传。但是对浏览器支持有一些限制，目前支持IE10及以上浏览器。

2. 总体思路

文件上传的流程如下图所示，主要有两个步骤：计算MD5值，文件切片上传。上传过程大致有一下三种情况：1.第一次上传文件：经过1->2->3->4<->5->6完成上传文件；2.秒传：经过1->2->3->6完成上传文件；3.断点续传：经过1->2->4<->5->6完成上传文件。

       

3. 具体实现

 

1）计算MD5值

Message Digest Algorithm MD5（中文名为第五版）为计算机安全领域广泛使用的一种散列函数，可以作为对文件唯一性的判断标准。MD5实现大附件秒传和和断电续传的基础，也是首先要解决的问题。首先，我们要在项目中引出spark-MD5.js，该文件中包含有计算MD5值的算法，通过其API可以直接计算上传附件的MD5值，具体的实现过程如下：

2）判断MD5值

计算出MD5值之后，就去获取该MD5值对应的文件，如果文件已存在且上传完毕就直接完成上传，如果还没有上传完成则返回已上传长度。

图2-1 判断MD5值前端调用

图2-2 判断MD5值后台处理

3）附件切片上传

文件断点续传在客户端处理需要解决两个问题：1. 文档切片；2. 实时控制文件上传的暂停与启动。在之前的技术文章中做过介绍：

图3-1 文件上传前端调用

 

图3-2 文件上传后台处理