HTML5实现文件断点续传
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会做出相应的处理。
转载于:https://www.cnblogs.com/zhangwc/p/6248516.html
HTML5实现文件断点续传相关推荐
- html5解决大文件断点续传6,解决html5大文件断点续传
一.概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content- ...
- Html5大文件断点续传实现方法
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
- html5计算文件hash,spark-md5生成hash码,spark-md5计算大文件hash码实现断点续传
spark-md5import SparkMD5 from 'spark-md5'; var hexHash = SparkMD5.hash('Hi there'); // hex ha ...
- 文件上传控件-如何上传文件-大文件断点续传
需求: 项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在20G内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以20G来进行限制. PC端全平台支持,要求支持Window ...
- java 开源 断点续传,全平台大文件断点续传上传技术 ( 开源项目 Stream )
Stream 上传插件介绍 Stream 这个项目主要是为了解决大文件上传, 本程序只是它的一个 Perl 后端的实现. 项目网站是: http://www.twinkling.cn 原始地址是: h ...
- HTML5 本地文件操作之FileSystemAPI整理(二)
一.文件目录操作 1.DirectoryEntry对象 属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...
- iOS开发之网络编程--使用NSURLConnection实现大文件断点续传下载
前言:iOS开发之网络编程--使用NSURLConnection实现大文件断点续传下载是在前篇iOS开发之网络编程--使用NSURLConnection实现大文件下载的基础上进行 断点续传的设置 ...
- html5页面输出语句,使用html5输出文件
在html5中,我们可以使用canvas.toDataURL("类型");这是实际就是把绘制的图片等等保存到打他URL地址指向的数据中,而不是真正的一个物理地址,但是我们可以通过这 ...
- php处理html5文件上传代码,HTML5中文件上传的代码
这篇文章给大家分享的内容是关于HTML5中文件上传的代码,有一定的参考价值,有需要的朋友可以从参考一下,希望对你有所帮助.XHR2上传二进制文件 html代码: javascript代码:functi ...
最新文章
- 【python图像处理】图像的增强(ImageEnhance类详解)
- react使用引入svg的icon;svg图形制作
- 网络安全-防火墙与入侵检测系统
- B+/-Tree原理及mysql的索引分析
- 纵横免root框架打不开应用怎么办_很好用的软件多开神奇安卓欧皇十框架!!!...
- C#LeetCode刷题之#374-猜数字大小(Guess Number Higher or Lower)
- 力扣题目——143. 重排链表
- 安卓手机访问 ubuntu 共享的方法
- iOS上传应用到AppStore出现Authenticating with the iTunes store
- Linux的uevent事件机制
- 谷歌浏览器无法登陆百度贴吧
- allegro修改铜皮网络
- vue3.0组合式api语法使用总结
- [NFC]NFC 客户 Support 流程
- JS安全域名验证,安全域名效验,安全域名检查,正则表达式RegExp检查域名,截取字符串检查域名,检查域名url前缀的域名部分是否包含指定域名
- Osmo Mobile 教学
- 文件校验工具HashTab
- openBoard开源白板项目
- Python(arcpy) 根据站点经纬度(坐标)批量提取对应格点值
- Oracle-PL/SQL-Developer-数据从服务器迁移至本地
热门文章
- dom4j读取xml信息
- spring的事物配置
- spring学习网址(博客)
- oracle查询 :一个角色包括的系统权限,对象权限,Oracle有多少种角色,某个用户有什么角色
- mybatis 配置文件报错:Referenced file contains errors(file:/D:/config/ mybatis-3-mapper.dtd).
- python while-Python天坑系列(一):while 1比while True更快?
- XSS:RPO(Relative Path Overwrite)攻击
- Lua:给Redis用户的入门指导
- 【机器学习】降维技术-PCA
- 关于LayoutParams