搜索
当前位置: 三分彩网站 > 断点续传 >

如何实现HTML5文件断点续传

gecimao 发表于 2019-08-15 22:48 | 查看: | 回复:

  可选中1个或多个下面的关键词,搜索相关资料。也可直接点“搜索资料”搜索整个问题。

  1【专注:Python+人工智能Java大数据HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】

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

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

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

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

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

  目前比较常用的断点续传的方法有两种,一种是通过websocket接口进行文件上传,另一种是通过ajax,两种方法各有千秋,虽然websocket听起来比较高端些~ 但是除了用了不同的协议外其他的算法基本上都是很相似的,并且服务端要开启ws接口,这里用相对方便的ajax来说明断点上传的思路。

  说来说去,断点续传最核心的内容就是把文件“切片”然后再一片一片的传给服务器,但是这看似简单的上传过程却有着无数的坑。

  首先是文件的识别,一个文件被分成了若干份之后如何告诉服务器你切了多少块,以及最终服务器应该如何把你上传上去的文件进行合并,这都是要考虑的。

  因此在文件开始上传之前,我们和服务器要有一个“握手”的过程,告诉服务器文件信息,然后和服务器约定切片的大小,当和服务器达成共识之后就可以开始后续的文件传输了。

  前台要把每一块的文件传给后台,成功之后前端和后端都要标识一下,以便后续的断点。

  当文件传输中断之后用户再次选择文件就可以通过标识来判断文件是否已经上传了一部分,如果是的话,那么我们可以接着上次的进度继续传文件,以达到续传的功能。

  有了HTML5 的 File api之后切割文件比想想的要简单的多的多。

  参数start是开始切片的位置,end是切片结束的位置 单位都是字节。通过控制start和end 就可以是实现文件的分块

  上一部我们通过slice方法把文件分成了若干块,接下来要做的事情就是把这些碎片传到服务器上。

  var url = xxx // 文件上传的地址 可以包括文件的参数 如文件名称 分块数等以便后台处理

  // 选用 如果文件分块大小较大 可以通过该方法判断单片文件具体的上传进度

本文链接:http://dogayoga.net/duandianxuchuan/976.html
随机为您推荐歌词

联系我们 | 关于我们 | 网友投稿 | 版权声明 | 广告服务 | 站点统计 | 网站地图

版权声明:本站资源均来自互联网,如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

Copyright @ 2012-2013 织梦猫 版权所有  Powered by Dedecms 5.7
渝ICP备10013703号  

回顶部