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+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
做一个有下拉功能的留言版
2006/10/09 PHP
坏狼的PHP学习教程之第2天
2008/06/15 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
微信小程序实现弹框效果
2020/05/26 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
公司领导推荐信
2013/11/12 职场文书
小学校长汇报材料
2014/08/20 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS