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制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
FleaPHP的安全设置方法
2008/09/15 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
java script编程起步(第三课)
2007/01/10 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
Python 连连看连接算法
2008/11/22 Python
Python 列表(List)操作方法详解
2014/03/11 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
大学生实习证明范本
2014/01/15 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
毕业生自荐信格式
2014/03/07 职场文书
文员岗位职责
2015/02/04 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
求职信如何撰写?
2019/05/22 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技