本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、毕业设计辅导
 当前位置:文章中心 >> web前端技术
立即购买视频教程 文件断点续传的实现
夜鹰教程网 来源:www.yyjcw.com 日期:2017/6/30 16:30:54
分享到:
文件断点续传的实现

这篇文章不能解决你的问题?我们还有相关视频教程哦!

QQ:1416759661 新手QQ群:7835003  加Q远程协助!

在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术咨询: 购买教程  技术咨询:购买教程  大胆的加QQ咨询。

文件断点续传的实现

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

微云控件安装的提示


百度网盘似乎有文件上传暂停的功能,这似乎是借助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


说明:


上demo可以说是一个比较完善的上传体验,有删除,重传,续传,进度条等常用功能。

基于Ajax 2.0的二进制文件传输实现,因此,IE10+,Chrome以及Firefox等浏览器支持。另外JS原生,无外部依赖。

空间的流量月月吃紧,经常溢出不够用,因此,为了节约成本,只允许最大200K的文件。所以,大家想要测试断点续传效果,可以通过工具,把自己的浏览器速度限制到10~20K每秒。

demo页面每100K就会对文件进行一次分割上传,因此,100~200K大小文件会有看到2次上传请求。PS:实际开发时候,应该至少1M一次分割。

为了直观表现断点上传的功能,我会截一个本地的视频给大家演示,并原声重现。

后台PHP很简单,就是追加二进制数据,file_put_contents方法有个FILE_APPEND选项,直接追加,很好用的!

正好研究了下开源协议


复制链接 网友评论 收藏本文 关闭此页
上一条: web worker 实现js多线程  下一条: 在项目中使用 IScroll问题总结
购买夜鹰教程网视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  购买教程
  热点推荐
XML Schema学习笔记(1)
XML Schema学习笔记(2)
C#对XML文档的操作
ASP操作XMLDOM
XML入门教程:分析XML
百度新闻开放协议XML文档制作方法…
XSL 语言
用RSS做五分钟一自动更新的网站
XML入门教程:文档类型声明
XML教程:通过一个例子来学习XML的…
XML节点相关知识
把XML文件绑定到列表控件
XML+XSLT+CSS+JQuery+WebService组…
XHTML头部Doctype声明必不可少!
历数Firefox2.0对XML处理的改进
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
移动端视口的相关概念及其适配方案…
上传图片立即预览
web worker 实现js多线程
文件断点续传的实现
在项目中使用 IScroll问题总结
APP中图片的压缩与上传
git常用命令汇总
Git 常用命令介绍
Grunt.js学习教程
webpack学习指南
Webpack教程01
微信小程序第一批吃螃蟹的人
前端面试题-事件监听、继承、闭包…
HTML5 Canvas学习笔记-处理鼠标事…
canvas学习笔记
  工具下载  需要远程协助? 购买教程

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
vs2012 vs2008 vs2010 sql2008 sql2005
Asp.Net  

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程哦!

QQ:1416759661 新手QQ群:7835003  加Q远程协助!

在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术咨询: 购买教程  技术咨询:购买教程  大胆的加QQ咨询。

关于我们 | 广告投放 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接 | 购买教程

Nighthawk Tutorials Network 快捷购买教程

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3

 

出售asp.net系列视频教程 高清原创版 每天晚上20:30--23:00在线 按照编号从简单到高级 http://www.yyjcw.com/list.html