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实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
php图片添加水印例子
2016/07/20 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python创建模块及模块导入的方法
2015/05/27 Python
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
安全标准化汇报材料
2014/02/03 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android