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 圆角效果
Jul 15 HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 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
从php核心代码分析require和include的区别
2011/01/02 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
PHP链表操作简单示例
2016/10/15 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
python检测远程端口是否打开的方法
2015/03/14 Python
Python检测生僻字的实现方法
2016/10/23 Python
Python调用C++程序的方法详解
2017/01/24 Python
20个常用Python运维库和模块
2018/02/12 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
几个Linux面试题笔试题
2012/12/01 面试题
师生聚会感言
2014/01/26 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
六查六看心得体会
2014/10/14 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
电影开国大典观后感
2015/06/04 职场文书
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL