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

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

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

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

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

目前市场上大多数的网站的断点上传都是需要安装浏览器插件的,本文就针对高级浏览器的环境下,通过HTML5 File api实现断点上传进行说明


一、实现文件多选


HTML5的<input>新增了"multiple"属性,该属性可接受多个值的文件上传字段


<input type="file" multiple="multiple" name="file" id="file">

添加了该属性用户就可以在弹出的对话框中一次性选择多个文件了


二、实现文件从计算机拖拽到网页以及添加文件队列功能


这里我们用 dragover 和 drop 两个事件来管理文件拖拽的功能


其中 dragover 用来处理在指定的元素上移动时的事件,这里我们通过给body绑定dragover时间来处理页面中拖动文件的事件


document.body.addEventListener('dragover', dragFile, false);

function dragFile(evt) {

evt.stopPropagation();

evt.preventDefault();

evt.dataTransfer.dropEffect = 'copy';

}

用 drop 事件来处理鼠标松开时候的事件,此时应该将用户拖动过来的文件加入到上传队列中,以供后续的处理


document.body.addEventListener('drop', dropFile, false);

function dragFile(evt) {

evt.stopPropagation();

evt.preventDefault();

// dataTransfer.files属性可以获取到所有拖动选择的文件,通过遍历可以读取到所有文件的信息。

// 遍历每个文件可以获取到文件的 name、size、type、lastModifiedDate等关键信息

var files = evt.dataTransfer.files;

// addfile 方法 用来添加上传文件队列,在input的change事件中也需要调用

// 该方法首先检查有无文件正在上传中,如果有就将后续加入的文件放到上传队列中,如果没有文件正在上传就直接执行上传命令

addfile(files);

}

三、文件续传原理


目前比较常用的断点续传的方法有两种,一种是通过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请求来实现


textpop-up

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


复制链接 网友评论 收藏本文 关闭此页
上一条: HTTP协议实现文件断点续传  下一条: 行内元素和块级元素汇总
购买夜鹰教程网视频教程
  推荐教程/优惠活动

  热门服务/教程目录

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

客服电话:153 9760 0032

购买教程QQ:1416759661  购买教程
  热点推荐
什么是css框架
meta标签实现页面的动感效果
CSS半透明滤镜在FIREFOX和IE下面的…
div+css鼠标悬停在div上,div背景色…
纯css下拉菜单特效
div+css的浏览器兼容问题
CSS定义表格线为单一线
CSS滤镜效果收集(全)
列表显示文字和图片垂直居中对齐
在固定位置显示背景图片
网站变换图片的显示方法
在select外面套一个div或span, se…
常用的CSS命名规则
闪字闪字闪字闪字闪字闪字闪字闪字…
css让图片自动适应表格大小
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
HTTP协议实现文件断点续传
H5实现断点上传
行内元素和块级元素汇总
H5视频直播技术介绍
border-image详解
你必须知道的HTML5的新特性
html5 js控制音乐播放
HTML+CSS代码规范
css3学习笔记 transition与animat…
css3学习笔记Transform
css3学习笔记2D或3D转换
css3学习笔记文本特效
css3学习笔记颜色和透明度
css3学习笔记二
css3学习笔记一
  工具下载  需要远程协助? 购买教程

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