HTML5实现文件断点续传的方法


Posted in HTML / CSS onJanuary 04, 2017

HTML5的FILE api,有一个slice方法,可以将BLOB对象进行分割。前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段将文件进行拼接。

断点续传原理

目前比较常用的断点续传的方法有两种,一种是通过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请求来实现

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

文件上传到后台后,后台程序如PHP会做出相应的处理。

HTML / CSS 相关文章推荐
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 #HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 #HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 #HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 #HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 #HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 #HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 #HTML / CSS
You might like
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
php事务处理实例详解
2014/07/11 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
JS 判断代码全收集
2009/04/28 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
Flask处理Web表单的实现方法
2021/01/31 Python
Viking比利时:购买办公用品
2019/10/30 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
实习教师自我鉴定
2013/09/27 职场文书
计算机大学生的自我评价
2013/10/15 职场文书
《中华少年》教学反思
2014/02/15 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
泰山导游词
2015/02/02 职场文书
总账会计岗位职责
2015/04/02 职场文书
生日祝酒词大全
2015/08/10 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
python实现三阶魔方还原的示例代码
2021/04/28 Python
Go使用协程交替打印字符
2021/04/29 Golang