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实现超酷下载按钮
Mar 18 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
PHP 导出Excel示例分享
2014/08/18 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
Puppet的一些技巧
2018/09/17 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
Python自动调用IE打开某个网站的方法
2015/06/03 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
Python读取properties配置文件操作示例
2018/03/29 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
计算机求职信
2013/12/01 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书