XMLHttpRequest实现HTTP协议下文件上传断点续传

标签: js实例 Ajax Blob File HTTP协议 | 发表时间:2013-11-04 18:22 | 作者:张 鑫旭
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址: http://www.zhangxinxu.com/wordpress/?p=3754

一、网盘割据的时代

不知大家有没有观察过,在秋季,也就是眼下这个时间,当阵风挂起的时候,地上的落叶就会以一个接一个,翻滚着一同被吹走,这就是“跟风”。老祖宗确实很有智慧,造出来的词语源于生活,又高于生活。

眼下,又是另一波跟风之势——“网盘”,犹如当年团购一样。不过,网盘还是有一定的技术和其他成本,因此,还不像团购那样“落叶漫天飞舞”的状态。但是,各大公司相继介入,可谓又是另外一场群雄之战。

秋风扫落叶 一吹一大片

我并不是专业的产品人,也不是公司的决策者,因此,面对一些纷杂繁芜的现象,自己无心去深入,也不会去评价。立志做个技术人,因此,我所关心的可能就是技术实现,至于孰对孰错,恩怨情仇,公关伎俩,生死天命等一概作云烟从眼前飘过。

网盘中有个很重要的,可以说是核心的功能,就是文件上传,So,本文就来说说这个上传,如何在HTTP协议下实现文件的断点续传呢?

二、文件断点续传的实现

目前从实用技术角度讲,文件上传的断点续传实现主要是借助客户端,例如,我们首次进入微云,会看到下图所示的“控件安装”提示:
微云控件安装的提示

百度网盘似乎有文件上传暂停的功能,这似乎是借助swfUpload实现的。

也就是,这些带续传功能的上传都不是使用HTTP协议实现的,也就是不是传统的网页技术(HTML+CSS+JS)实现的。

然,times are changing, 事物发展,时代变化。以前的一些所谓的“不能”、“不可能”都将成为过去。

上月一篇独苗文章介绍了XMLHttpRequest level 2(下简称Ajax 2.0)中的 一些支持的数据格式,如果稍微关注,应该知道,Ajax 2.0中最大的变化之一就是对二进制数据的支持,而且提供了一个可以直接处理二进制数据的方法—— slice方法。

JS中的字符串有 slice方法,数组也有。Ajax 2.0经过一些变化后,现在也和数组、字符串的 slice方法语法完全一致了。于是,我们就可以把二进制数据流想象成一些连续的字符串数据,并对这些二进制数据进行 slice处理。

比方说怎样的场合呢?

PHP默认似乎有个 最大文件上传的限制post_max_size,我的本地看了下,是 64M.
PHP默认最大上传限制

此时,我们想一次性传一个 80M的动作片精华片段,就会以失败告终。

但是,有了 slice方法,我们可以把文件分割,比方说,每 20M作为一个请求发送出去,后台再把这些二进制数据拼合成一个完整文件。

slice(0, 20); slice(20, 40); slice(40, 60); slice(60)

还有一个很重要的场合就是 断点续传

文件传输是个具有时间周期的过程,从玩三国杀的离线率可以看出,掉线什么的是常有的事情。显然,传文件必定会存在传着传着就死在99%位置的情况。

你想啊,大鼻孔姐的片子想放到网盘里,随时随地可以欣赏。结果看着进度条等了40分钟,好不容易传到99%,突然断电…………开机后,发现又要重传,是不是小弟弟要气得短小软?显然,后果很严重哈~

因此,对于大文件而言,断电续传功能很重要。有了Blob数据格式的 slice方法,一切都变得简单了。

我的思路是这样的,有两条:
1. 浏览器记住(如localStorage)最近一次成功传输的位置;当再次上传这个图片的时候,直接从浏览器存储的位置开始传。
2. 浏览器不做任何事情,在上传之前先去后台走一遍,看看目前此文件是否存在,以及存在的大小,返回给浏览器,然后浏览器再决定上传的起始位置。

理性的分析以及实践的结果表明,第二种思路可行性更高。//zxx: 并不一定是最好的思路,您可以自己想出更精彩的实践方法

如果用 文字举例的话就是:
某老师的视频是 80*1024*1024B, 我们每次传 1024*1024B,也就是 1M,假设传了 79M了,结果大脚一抖,电源关掉有木有!某老师就这样随风逝去了……

用户重新开机,决定再次传这个80M的视频。当用户选择了这个文件后,我们先去后台走一圈,把当前已经传好的文件大小反馈给客户端(Ajax 1.0就可以),JS拿反馈大小和源文件大小一比对,奶奶的,残缺啊!于是,就从残缺位置 slice,这里就是:

file.slice(79*1024*1024)

接着之前的只传了1M就OK啦!于是,断点续传实现。

由于网页本身的局限性,我们没法直接触发本地文件的上传。因此,目前而言,断点文件还是要用户选择(相比客户端上传软件多了这一步)。

三、文件断点续传的实践

Ajax实现的文件断点续传demo截图 张鑫旭-鑫空间-鑫生活

您可以狠狠地点击这里: HTTP协议下Ajax实现的文件断点续传demo

说明:

  1. 上demo可以说是一个比较完善的上传体验,有删除,重传,续传,进度条等常用功能。
  2. 基于Ajax 2.0的二进制文件传输实现,因此,IE10+,Chrome以及Firefox等浏览器支持。另外JS原生,无外部依赖。
  3. 空间的流量月月吃紧,经常溢出不够用,因此,为了节约成本,只允许最大 200K的文件。所以,大家想要测试断点续传效果,可以通过工具,把自己的浏览器速度限制到 10~20K每秒。
  4. demo页面每 100K就会对文件进行一次分割上传,因此, 100~200K大小文件会有看到2次上传请求。PS:实际开发时候,应该至少 1M一次分割。
  5. 为了直观表现断点上传的功能,我会截一个本地的视频给大家演示,并原声重现。
  6. 版权声明:demo页面中的JS+CSS+HTML源代码遵循GPL协议,即您可以任意复制,修改,但是,只能作为学习或私人项目使用,不能作为商业软件的一部分去出售。如有疑问,可zhangxinxu@zhangxinxu.com联系。另外,demo页面中的文件图标们为我司设计师设计,具有公司版权,一旦商用了,你的麻烦就大了。
  7. 后台PHP很简单,就是追加二进制数据, file_put_contents方法有个 FILE_APPEND选项,直接追加,很好用的!

其他一些技术细节,那洋洋洒洒没有百来行是描述不清的,这里不具体展示,应该说下次时机成熟才分享下。有问题欢迎邮箱联系。下面视频演示下断点续传的效果:

视频展示:
因为半夜三更录的视频,老婆大人已经安然就寝,所以自己声音比较小,发音也不太准,貌似被优酷搞糊了,大家凑合看看吧~~

四、说点题外话

上月本人只更新了一篇文章。有一周是整周的培训。然后除了研究现在这个Ajax断点续传,还在做一个自己的开源项目(已经用了两周了,本周应该可以结束)。

本人最近有在纠结专利与开源的事情。我司申请专利很是方便,而且公司鼓励,且对个人发展有很有帮助,我显然是要积极做这些事情的。但是,个人价值观中很重要的一点就是要留下什么,因此,自己是非常喜欢共享东西的。于是就存在一个矛盾,有些东西,例如一些创新的想法或者实现方式,如果成为的专利,就不好拿出来随意分享了,因为,自己申请的专利不是自己的而是公司的,自己完全没有把控权。头疼~~

不过,今天例会跟组里前辈沟通了下,算是想通了。这样子,自己平时业余时间研究的东西,即使很赞,很具有专利性,我也会及时和大家一起探讨与进步;如果是实际工作发现的创新性想法,则走专利路线,技术封闭。我举得这样的权衡应该是很不错的,不知大家的看法如何呢?

哈哈,今天特地研究了下开源版权的问题,学到了不少,各种License都大致了解了一点,文中好像就有体现了,

博客所有技术文章遵循CC协议,即署名、非商业性使用、相同方式共享、禁止演绎。

一些开源插件等遵循其他协议,回头补上~~

原创文章,转载请注明来自 张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]
本文地址: http://www.zhangxinxu.com/wordpress/?p=3754

(本篇完)

有话要说?点击 这里发表评论。

相关 [xmlhttprequest http 协议] 推荐:

XMLHttpRequest实现HTTP协议下文件上传断点续传

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=3754. 不知大家有没有观察过,在秋季,也就是眼下这个时间,当阵风挂起的时候,地上的落叶就会以一个接一个,翻滚着一同被吹走,这就是“跟风”. 老祖宗确实很有智慧,造出来的词语源于生活,又高于生活. 眼下,又是另一波跟风之势——“网盘”,犹如当年团购一样.

Http协议详解

- - 浏览器 - 互联网 - ITeye博客
什么是HTTP协议 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,超文本传输协议(HTTP)是一种通信协议,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器 目前我们使用的是HTTP/1.1 版本 Web服务器,浏览器,代理服务器 当我们打开浏览器,在地址栏中输入URL,然后我们就看到了网页.

http协议知识点

- - 互联网 - ITeye博客
媒体类型:http服务器会给在http中传送的http资源对象附加一个MIME类型,接收http资源对象的客户端会根据这个类型来判断是否能够进行处理,例如浏览器就能够处理上百种mime类型的http资源对象. MIME类型是一种文本标记,表示一种主要对象类型和一种特定的子类型,中间用一条斜杠来分隔,例如text/html、imge/gif.

HTTP 协议中的 Transfer-Encoding

- - JerryQu 的小站
本文作为我的博客「 HTTP 相关」专题新的一篇,主要讨论 HTTP 协议中的 Transfer-Encoding. 这个专题我会根据自己的理解,以尽量通俗的讲述,结合代码示例和实际场景来说明问题,欢迎大家关注和留言交流. Transfer-Encoding,是一个 HTTP 头部字段,字面意思是「传输编码」.

http协议:Web前端-HTTP Cache-control/浏览器缓存(转)

- - 互联网 - ITeye博客
HTTP协议分别在 1.0 / 1.1 两个时代推出了 Expires / Cache-control 两种cache策略,这里我们无需了解全部的细节,无需记住整个RFC内容,但是当我们需要使用HTTP cache策略时,我们需要注意以下细节:. Expires 是HTTP 1.0 那个时代的东西了,目前来看,可以不使用了,因为HTTP 1.0 的user agent占有率在 0.1% 以下(我们主要面向的web浏览器均默认使用HTTP 1.1),Cache-control 是 HTTP 1.1 的新特性,也是我们主要做文章使用cache策略的工具.

[转][转]深入理解HTTP协议

- - heiyeluren的Blog
来源: http://www.blogjava.net/zjusuyong/articles/304788.html.   HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写. 它的发展是万维网协会(World Wide Web Consortium)和Internet工作小组IETF(Internet Engineering Task Force)合作的结果,(他们)最终发布了一系列的RFC,RFC 1945定义了HTTP/1.0版本.

http协议详解(超详细)转

- - 行业应用 - ITeye博客
http 协议学习系列       HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议.   HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写. 它的发展是万维网协会(World Wide Web Consortium)和Internet工作小组IETF(Internet Engineering Task Force)合作的结果,(他们)最终发布了一系列的RFC,RFC 1945定义了HTTP/1.0版本.

浅析http协议与缓存

- - 博客园_Ruby's Louvre
最近几天在复习http协议中headers,缓存等相关知识,发现些新知识点. 这篇文章注重结合PHP去理解这些内容,也就是比较注重实践部分. 一、http headers. NO1:对于web应用,用户群在客户端 (各种浏览器)点击任何一个连接向服务器发送http请求,这过程肯定需要3次握手,建立连接,服务器响应返回数据.

探索HTTP/2: HPACK协议简述(原)

- - BlogJava-首页技术区
探索HTTP/2: HPACK协议简述. 在本系列的第一篇文章中已经介绍了HTTP 2协议,本文则将简述用于HTTP/2头部压缩的 HPACK协议. (2016.09.24最后更新).     HPACK头部压缩的基本原理就是使用索引表和 Huffman编码. 在压缩(编码)与解压(解码)过程,可将指定的头部字段(包含字段名与字段值)存储在索引表中.

XMPP协议、MQTT协议、HTTP协议、CoAP协议的基本比较

- - ITeye博客
一、先看下相关国外的专业数据对四大协议的比较:.           XML的解析对于嵌入多设备来说是比较痛苦的 ,所以在嵌入设备上做开发的时候,最好不要选择基于XML的协议.          二、四大协议的基本介绍:.    XMPP是一种基于标准通用标记语言的子集XML的协议,它继承了在XML环境中灵活的发展性.