java断点续传插件_视频断点续传+java视频

之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需求,都能得到满足。小小开心了一把。

但无论插件再怎么灵活,也难以应付所有的需求,比如,你要上传一个2G的文件。以现在我们的网速,恐怕再快也得传半小时。要命的是,如果你在上传到90%的时候不小心关掉了浏览器,或者是手一抖摁了F5,完了,一切还得从头再来。这种用户体验简直太糟糕了。所以,断点续传就十分有必要了。什么是续传我就不解释了,用QQ传文件这么多年,大家都见过了。

这里要说的是断点续传都有哪些技术要点。使用传统的表单提交文件或是HTML5的FormData都是将文件“整块”提交,服务端取到该文件后再进行转移、重命名等操作,因此,无法实时保存文件的已上传部分。而且在http协议下,我们无法保持浏览器与服务端的长连接,不能以文件流的形式来提交。所以要解决的问题具体来讲有以下几点:

对上传的文件进行分割,每次只上传一小片。服务端接收到文件后追加到原来部分,最后合并成完整的文件。

每次上传文件片前先获取已上传的文件大小,确定本次应切割的位置

每次上传完成后更新已上传文件大小的记录

标识客户端和服务端的文件,保证不会把A文件的内容追加到B文件上

在参考了张鑫旭大哥的这篇文章后,我将学到的技术应用在了我的插件Huploadify中,成功的添加了断点续传功能。在此将技术和插件都分享给大家。

工作原理/技术要点

首先的首先,要明确,如果我们有一个10M的文件,每次切割上传1M,那么是需要发10次请求来完成的。在http协议下,只能这么搞。断点上传分三步来完成:

选择一个文件后,获取该文件在服务器上的大小,通过本地存储或自定义的函数来获取。

根据已上传大小切割文件,发出n次请求不断向服务器提交文件片,服务端不断追加文件内容

当已上传文件大小达到文件总大小时,上传结束

首先是文件的分割,HTML5新增了Blob数据类型,并且提供了一个可以分割数据的方法:slice(),其用法和字符串、数组的slice()方法一样,可以截取一个二进制文件的一部分。

其次是文件片的保存与追加,我后台用PHP写的,先用file_get_contents获取文件的二进制格式,再用file_put_contents每次将文件追加,具体的写法可以参照后面,或者是下载我打包好的文件。

接下来我们还需要实时保存已上传文件的大小,以便于下次上传前进行正确切割。使用HTML5的localStorage是一种方法,将已上传的大小保存在本地,下次上传前先从本地读取。不过这种方式是很局限的,抛开用户可能通过各种管家清除掉本地数据不讲,假如用户在A页面上传了一个文件的50%,然后在B页面想把该文件上传到另外一个地方,结果从本地一读文件已上传50%了,直接从51%的位置开始上传了,显然是个错误。问题就在于本地不能存太多的信息,通过File API只能获取到文件的原始名称,无法正确的与服务器上的文件正确匹配。所以真正在项目中用,还得依靠服务端来保存这些数据。

关于如何将数据存在服务端,已经前端如何取数据,我在下面会讲到。

技术要点就上面的那么多了,其实也没有多少技术含量哈~来看看我的插件如何使用吧。

续传功能的使用方法

文件的引入就不讲了,可参考上一篇关于插件的介绍。关键点是新增的几个配置,先来看一下:

b9d2be9db4e2b67bdc18c6f696b70d79.pngwAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

在服务端保存数据

用户在使用上传的时候可能有各种你意想不到的操作,这里我发挥想象描述一下用户可能的行为:

同一台机器使用不同帐号登录,上传同一个文件

文件上传了一部分,然后修改了文件内容,再次上传

文件上传完成100%,再次上传该文件

同一个页面有多个上传按钮,上传同一个文件,或在不同页面上传同一个文件

仅仅上面四条,是不是情况就够复杂了?再加上你系统还有自己的业务逻辑,所以在服务端保存已上传文件数据是非常有必要的。而且保存数据和获取数据的函数都交给你来定义,抱着插件有足够的灵活性。

因为涉及到了服务端的技术,无法演示,我将我项目中的真实使用场景在此讲解一下,来展示一下如何自已定义方法来实现服务端保存数据的可靠上传。我定义的getUploadedSize函数如下:

文件初始化

6d9d2f1c30246f1b5cccaf4e5cb8c00e.pngwAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

文件上传完毕的代码

996604af0fc4b959a28cfb6b1f04b9f0.pngwAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

文件块的处理代码,up6对文件块的处理,以及文件续传的逻辑进行了大幅度的优化,开发者不需要关心续传的细节,因为up6默认就是自动续传

12938c12d3a706e50e999fc2f318311b.pngwAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

我向后台的某个地址发送一个请求,传递文件名和文件的最后修改时间为参数,后台根据这两个参数来找到与前台所选择的文件对应的服务器上的文件,将服务器返回的文件大小return出去,来被插件使用。为什么要传递这两个参数呢?我们在前台无法知道服务器上的这个文件的名称,所以使用原始文件名作为一个辅助标识。为了防止用户在两次上传间隔修改了文件,我们把文件的最后修改时间也传给服务端,让服务端进行比较,若时间不对应则返回已上传大小为0,重新上传此文件。

再来看后台都要做哪些工作。数据库中需要有一张表来记录每个已文件的情况,包含的字段大致有:字段描述

uid用户ID

id文件ID标识(唯一)

lenSvr服务器文件大小

lenLoc本地文件大小

blockOffset文件块偏移(在整个文件中的位置)

blockSize文件块大小

blockIndex文件块索引(基于1)

blockMd5文件块MD5

complete当前文件是否已经传完

根据client_filename和last_modified_date,再加上系统中的其他关联信息,可以定位到本次上传的文件在服务端的大小,然后返回给客户端。当然这是我自己的用法,你也可以根据自己的需求灵活设计。总之最终的目的就是要找到前台选择的文件在服务器上真正对应的文件,并将已上传大小正确返回。

另外需注意的一点,就是在续传的第二步,不断提交文件片的过程中,也需要服务端准确定位到相应的文件,不能把A的数据追加到B上。采用的方式也是提交fileName和lastModifyDate两个参数(已写在插件内部,可服务端直接获取),服务端找到对应的文件进行追加。

另外再啰嗦一句,后台获取文件的时候需要取成二进制的,而我们提交是使用FormData来提交的,所以PHP代码需要这么写:

file_put_contents('uploads/'.$filename,file_get_contents($_FILES["file"]["tmp_name"]),FILE_APPEND);

如果上面的说明还是不够清楚,就需要你自己来探索一下了,毕竟考虑到插件可能应用在复杂的系统中,很多工作还是需要你来做的。或者你也可以给我留言,我很乐意为你解答疑惑。

该版本的其他改动

从1.0到2.0,Huploadify又新加了很多东西,不过只是新加,使用方式跟之前的没有变化。例如上面的断点续传功能,你如果不想使用,只需设置breakPoints为false即可,插件仍按照以前的方式工作。除了断点续传这个大头,插件还做了如下改动:

增加了onSelect回调函数,在选择了文件之后触发,用法与uploadify官网的一致

up6提供了3个事件,选择文件,选择文件夹,粘贴

用户选择文件时会触发open_files,选择文件夹触发open_folders,粘贴会触发以上两个事件,因为用户可能粘贴的文件和文件夹

cced05dcbe7e07ecfcef845dba7941bb.pngwAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

删除掉正在上传的文件,中断发送请求

完善了input file组件的accept属性支持,浏览时只显示运行的文件格式,就是这个东东:

ff86ccaae3b84a28137f3805fe07b26e.pngwAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

4. 对外开放了方法调用接口,upload、stop、cancel、disable、ennable。我在demo中有演示。使用方法如下:var up = $('#upload').Huploadify({

auto:false,

fileTypeExts:'*.jpg;*.png;*.exe;*.mp3;*.mp4;*.zip;*.doc;*.docx;*.ppt;*.pptx;*.xls;*.xlsx;*.pdf',

multi:true

});

up.upload(1);//开始上传文件,接收一个参数,表示上传第几个文件,可传入*上传队列中的所有文件

up.stop();//暂停上传队列中的所有文件,不接收参数。用于开启了断点需传

up.cancel(1);//删除队列中的某个文件,接收一个参数,表示删除第几个文件,可传入*删除队列中的所有文件

up.disable();//使选择文件按钮失效,不接收参数

up.ennable();//使选择文件按钮生效,不接收参数  5. 修改其他已知bug

结束

插件刚刚完成,与我们的后端程序员调试完成了断点续传功能暂未发现问题,欢迎大家在使用的时候给我提任何问题。老实来讲这个功能使用起来还是挺费解的,为了最大程度的保证灵活做成这样,大家可以与我多多交流~

我在demo中使用了本地存储来做已上传文件大小的保存,下载压缩包后可看一下效果。上传一个比较大的视频文件,上传到中间关闭浏览器,再次打开浏览器上传同一个文件,会看到从上次断掉的地方继续上传。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/392448.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

tomcat中设置Java 客户端程序的http(https)访问代理

1、假定http/https代理服务器为 127.0.0.1 端口为8118 2、在tomcat/bin/catalina.sh脚本文件中设置JAVA_OPTS,如下图: 保存后重启tomcat就能生效。转载于:https://www.cnblogs.com/zhangmingcheng/p/11211776.html

MQTT服务器搭建--Mosquitto用户名密码配置

前言: 基于Mosquitto服务器已经搭建成功,大部分都是采用默认的是允许匿名用户登录模式,正式上线的系统需要进行用户认证。 1.用户参数说明 Mosquitto服务器的配置文件为/etc/mosquitto/mosquitto.conf,关于用户认证的方式和读取的…

压缩/批量压缩/合并js文件

写在前面 如果文件少的话,直接去网站转化一下就行。 http://tool.oschina.net/jscompress?type3 1.压缩单个js文件 cnpm install uglify-js -g 安装 1>压缩单个js文件打开cmd,目录引到当前文件夹,cduglifyjs inet.js -o inet-min.js 或者 uglifyjs i…

软件安装(JDK+MySQL+TOMCAT)

一,JDK安装 1,查看当前Linux系统是否已经安装了JDK 输入 rpm -qa | grep java 如果有: 卸载两个openJDK,输入rpm -e --nodeps 要卸载的软件 2,上传JDK到Linux 3,安装jdk运行需要的插件yum install gl…

TensorFlow 2.X中的动手NLP深度学习模型准备

简介:为什么我写这篇文章 (Intro: why I wrote this post) Many state-of-the-art results in NLP problems are achieved by using DL (deep learning), and probably you want to use deep learning style to solve NLP problems as well. While there are a lot …

静态代码块

静态代码块 静态代码块:定义在成员位置,使用static修饰的代码块{ }。位置:类中方法外。执行:随着类的加载而执行且执行一次,优先于main方法和构造方法的执行。格式:作用: 给类变量进行初始化赋值…

学java 的要点_零基础学Java,掌握Java的基础要点

对于程序员群体来说,了解一定的技巧会对学习专业技能更有帮助,也更有助于在自己的职业发展中处于有利地位,无限互联Java培训专家今天就为大家总结Java程序员入门时需要掌握的基础要点:掌握静态方法和属性静态方法和属性用于描述某…

实验人员考评指标_了解实验指标

实验人员考评指标In the first part of my series on experimental design Thinking About Experimental Design, we covered the foundations of an experiment: the goals, the conditions, and the metrics. In this post, we will move away from the initial experimental…

核心技术java基础_JAVA核心技术I---JAVA基础知识(集合set)

一:集合了解(一)确定性,互异性,无序性确定性:对任意对象都能判定其是否属于某一个集合互异性:集合内每个元素都是无差异的,注意是内容差异无序性:集合内的顺序无关(二)集合接口HashSet&#xff…

nba数据库统计_NBA板块的价值-从统计学上讲

nba数据库统计The idea is not to block every shot. The idea is to make your opponent believe that you might block every shot. — Bill Russel这个想法不是要阻止每一个镜头。 这个想法是让你的对手相信你可能会阻挡每一个投篮。 —比尔罗素 The block in basketball ha…

【炼数成金 NOSQL引航 三】 Redis使用场景与案例分析

验证redis的主从复制,将实验过程抓图 复制配置文件 更改slave的端口 和相关master配置 主从复制测试 研究在OAuth中的“一次数”nonce有什么用途?怎样使用?以此熟悉OAuth的全流程 nonce ,一个随机的混淆字符串,仅仅被…

js建立excel表格_建立Excel足球联赛表格-传统vs动态数组方法

js建立excel表格介绍 (Introduction) I am going to show you the different ways you can build a football league table in Excel. Some of the methods are old school but others utilise Excel’s new capabilities.我将向您展示在Excel中建立足球联赛表格的不同方法。 其…

postman+newman生成html报告

作为测试菜鸟,在学习postmannewman的使用过程中真的是颇费周折......没办法技术太菜,只能多学习. postman的下载安装不多言说,下载地址:https://www.getpostman.com/downloads/ newman的安装过程: 1.首先需要安装node.js,可以去官网下载,地址:https://nodejs.org/en/#download …

java jdk1.9新特性_JDK1.9-新特性

1. Java平台级模块系统该特性使Java9最大的一个特性,Java提供该功能的主要的动机在于,减少内存的开销,JVM启动的时候,至少会有30~60MB的内存加载,主要原因是JVM需要加载rt.jar,不管其中的类是否被classload…

两个链接合并_如何找到两个链接列表的合并点

两个链接合并了解问题 (Understand the Problem) We are given two singly linked lists and we have to find the point at which they merge.我们给了两个单链表,我们必须找到它们合并的点。 [SLL 1] 1--->3--->5 \ …

安装veket到移动硬盘NTFS分区

如果你已经看过《手动安装veket到硬盘》和《简单的将veket安装到U盘的方法》两篇文章并且安装成功的话,说明不适用本文的安装环境,就不用往下看了。 《手动安装veket到硬盘》一文采用grub4dos来引导硬盘上的veket,主要是用来在本机已安装Wind…

简书使用小技巧

1、不同字体  在 设置->基础设置->富文本 模式下可以实现 2、添加图片,让文章更生动 3、添加代码框 !注意:设置为Markdown模式后,只对新创建的文章起作用。转载于:https://www.cnblogs.com/HMJ-29/p/7049540.html

杭电2064

此题是一道简单的递归 此题是一道递归运算题,这题又是一道汉诺塔问题!!!只要了解其规律,呵呵,你就可以很快AC了!! 这是一般的汉诺塔问题的解题方法照片!!&…

阻塞队列实现

⭐ 作者:小胡_不糊涂 🌱 作者主页:小胡_不糊涂的个人主页 📀 收录专栏:JavaEE 💖 持续更文,关注博主少走弯路,谢谢大家支持 💖 阻塞队列 1. 什么是阻塞队列2. 标准库中的…

scrape创建_确实在2分钟内对Scrape公司进行了评论和评分

scrape创建网页搜罗,数据科学 (Web Scraping, Data Science) In this tutorial, I will show you how to perform web scraping using Anaconda Jupyter notebook and the BeautifulSoup library.在本教程中,我将向您展示如何使用Anaconda Jupyter笔记本…