HTML5实现文件断点续传的方法_1
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会做出相应的处理。
-
无相关信息
- 宝塔面板FTP链接服务器发回了不可路由地址
- 阿里云ecs安装宝塔面板失败原因?以及安装步骤?
- 织梦手机端-识别跳转
- html如何在一个form表单中实现多个submit
- thinkphp无限分类原理和实现代码
- thinkphp6 请求(request)变量
- 帝国CMS自定义列表SQL调用方法
- 帝国CMS自定义列表的使用实例
- 帝国cms自定义列表限制某个栏目显示
- PHP中利用for循环判断一个数是不是回文数
- PHP中判断一个数是否为素数的方法
- PHP中break,continue,exit的使用与区别
- 测试PHP连接MYSQL成功与否的代码
- PHP编程求最大公约数与最小公倍数的方法示例
- PHP获取数组中单列值的方法
- PHP使用一个for循环将N*N的二维数组的所有值置1实现方法
- HTML5+css3:3D旋转木马效果相册
- HTML,CSS,font-family:中文字体和英文名称对照表
- HTML使用栅格布局实现六种筛子样式的代码详解
- 修改CSS样式实现网页变灰色/黑白代码的几个方法整理
- 黄庭坚《水调歌头·游览》我欲穿花寻路 直入白云深处
- 黄庭坚《品令·茶词》恰如灯下 故人万里 归来对影
- 杜荀鹤《溪兴》山雨溪风卷钓丝 瓦瓯篷底独斟时
- 储光羲《张谷田舍》一径入寒竹 小桥穿野花
- 赵嘏《寒塘》晓发梳临水 寒塘坐见秋
- 蔡确《夏日登车盖亭》纸屏石枕竹方床 手倦抛书午梦长
- 李峤《书》河图八卦出 洛范九畴初
- 刘长卿《饯别王十一南游》长江一帆远 落日五湖春
- 韦庄《章台夜思》芳草已云暮 故人殊未来
- 卢纶《宿澄上人院》竹窗闻远水 月出似溪中
- 孟浩然《留别王侍御维》只应守寂寞 还掩故园扉
- 苏轼《南乡子·送述古》归路晚风清 一枕初寒梦不成
- 王维《木兰柴》秋山敛馀照 飞鸟逐前侣
- 王维《栾家濑》跳波自相溅 白鹭惊复下
- 苏轼《少年游·润州作代人寄远》对酒卷帘邀明月 风露透窗纱
- 苏轼《行香子·过七里濑》一叶舟轻 双桨鸿惊 水天清 影湛波平
- 王维《汉江临泛》江流天地外 山色有无中
- 柳宗元《溪居》晓耕翻露草 夜榜响溪石
- 杜牧《赠宣州元处士》蓬蒿三亩居 宽于一天下
- 项鸿祚《清平乐·池上纳凉》水天清话 院静人销夏