百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> H5怎么实现文件断点续传-
分享文章到:

H5怎么实现文件断点续传-

发布时间:08/01 来源:未知 浏览: 关键词:
这次给大家带来H5怎么实现文件断点续传,H5怎么文件断点续传的注意事项是什么,下面就是实战案例,一起来看一下。 这次给大家带来H5怎么实现文件断点续传,H5怎么文件断点续传的注意事项是什么,下面就是实战案例,一起来看一下。

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);

信赖看了本案牍例你已经把握了办法,更多出色请关注 百分百源码网 其它相干文章!

举荐浏览:

H5的存储方式详解、

H5怎样运用束缚验证API

以上就是H5怎么实现文件断点续传的细致内容,更多请关注 百分百源码网 其它相干文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有152人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板