Chinaunix首页 | 论坛 | 博客
  • 博客访问: 484147
  • 博文数量: 158
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 904
  • 用 户 组: 普通用户
  • 注册时间: 2016-10-10 11:17
文章分类

全部博文(158)

文章存档

2018年(74)

2017年(84)

我的朋友

分类: HTML5

2017-11-02 16:29:19

1. 前言

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

2. 总体思路

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

       image001.png

3. 具体实现

 

1)计算MD5值

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

image002.jpg

image003.jpg

2)判断MD5值

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

image004.jpg

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

image005.jpg

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

3)附件切片上传

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

image006.jpg

image007.jpg

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

image008.jpg

 

image009.jpg

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

 

阅读(561) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~