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之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
利用css3 translate完美实现表头固定效果
Feb 28 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 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来检测proxy
2006/10/09 PHP
解析php常用image图像函数集
2013/06/24 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
jquery图片切换插件
2015/03/16 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
物流管理专业职业生涯规划书
2014/01/06 职场文书
大学生求职自我评价
2014/01/16 职场文书
二年级数学教学反思
2014/01/21 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书