使用Spring和JQuery实现视频文件的上传和播放
Spring MVC可以很方便用户进行WEB应用的开发,实现Model、View和Controller的分离,再结合Spring boot可以很方便、轻量级部署WEB应用,这里为大家介绍如何使用Spring MVC、Spring boot、JQuery实现视频文件的上传和播放服务。
工具/原料
- Eclipse
- Jdk 1.8
- Spring
- JQuery
方法/步骤
创建Spring MVC标准工程
1)在Eclipse中使用创建标准的Maven工程
2)在Maven工程的依赖关系中增加Spring boot,Spring thymeleaf,spring-boot-devtools等依赖
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>hxb</groupId>
<artifactId>video</artifactId>
<version>0.0.1-SNAPSHOT</version>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.5.9.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
</dependencies>
<properties>
<java.version>1.8</java.version>
</properties>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
参考之前输出的Spring MVC经验文档,实现视频文件的存储服务
主要的视频文件存储服务接口类:StorageService.java
视频文件存储服务实现类:FileSystemStorageService.java
在FileUploadController控制中增加视频文件上传和存储的功能
页面逻辑: /uploadVideo -》uploadVideo.html -》/uploadVideo (Post)-》刷新uploadVideo.html(在该页面中播放上传的视频)
//文件上传的url入口:/uploadVideo,然后转入templates目录下的uploadVideo.html文件
@GetMapping("/uploadVideo")
public String showUploadVideoPage(Model model) throws IOException {
return "uploadVideo";
}
@PostMapping("/uploadVideo")
@ResponseBody
public String handleFileUploadVideo(@RequestParam("file") MultipartFile file,
RedirectAttributes redirectAttributes) {
System.out.print("handleFileUploadVideo>>>>>>>>>>>");
storageService.store(file);
return file.getOriginalFilename();
}
将jQuery-File-Upload-9.19.2插件加入到静态文件目录static目录下
在template模板目录下增加uploadVideo.html文件
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<!-- 静态文件css,js等放在static目录下 -->
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/jquery-ui.js"></script>
<script src="./jQuery-File-Upload-9.19.2/js/jquery.iframe-transport.js"></script>
<script src="./jQuery-File-Upload-9.19.2/js/jquery.fileupload.js"></script>
</head>
<body>
<div align="center">
视频文件上传:<input id="fileupload" type="file" name="file" />
<h2 id="result">Uploading...</h2>
<img alt="" src="" id="imgview"/>
<video src="" id="videoview" autoplay="autoplay"></video>
</div>
<script>
$(function(){
$("#fileupload").fileupload({
dataType:"text", //返回值为String对象
add:function(e,data){
alert("Begin to upload the file...");
var acceptFileTypes = /\/(mp4)$/i;
alert(data.originalFiles[0]['type']+"-->");
if(!acceptFileTypes.test(data.originalFiles[0]['type']))
{
alert("只能选择视频文件MP4格式进行上传,请重试!");
exit;
}
alert("File size(MB):"+data.originalFiles[0]['size']/1024/1024);
if(data.originalFiles[0]['size']>20*1024*1024)
{
alert("文件不能大于20MB");
exit;
}
data.submit();
},
done:function(e,data){
alert("upload the file Successfylly:"+data.result); //返回结果保存在data.result中
$("#result").text(data.result+"文件上传成功!");
$("#videoview").attr('src',"/img/"+data.result); //修改src属性
}
});
});
</script>
</body>
</html>
运行程序进行视频文件的上传测试
1)运行application.java
2)在浏览器中输入:http://localhost:8080/uploadVideo
3)选择视频文件(mp4)进行上传操作,成功后可以在该页面中看到成功上传的视频文件
使用Spring和JQuery实现视频文件的上传和播放的更多相关文章
- Android使用OKHttp库实现视频文件的上传到服务器
目录 1 服务器接口简介 2 Android端代码实现 2.1 xml布局文件 2.2 Activity类 2.3 Okhttp网络通信类 1 服务器接口简介 此处我使用的服务器接口是使用Flask编 ...
- Spring MVC 实现文件的上传和下载
前些天一位江苏经贸的学弟跟我留言问了我这样一个问题:“用什么技术来实现一般网页上文件的上传和下载?是框架还是Java中的IO流”.我回复他说:“使用Spring MVC框架可以做到这一点,因为Spri ...
- 利用webuploader实现超大文件分片上传、断点续传
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
- java HTTP文件断点上传
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
- asp.net 如何实现大文件断点上传功能?
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
- jsp文件断点上传
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
- 视频大文件分片上传(使用webuploader插件)
背景 公司做网盘系统,一直在调用图片服务器的接口上传图片,以前写的,以为简单改一改就可以用 最初要求 php 上传多种视频格式,支持大文件,并可以封面截图,时长统计 问题 1.上传到阿里云服务器,13 ...
- spring boot:单文件上传/多文件上传/表单中多个文件域上传(spring boot 2.3.2)
一,表单中有多个文件域时如何实现说明和文件的对应? 1,说明和文件对应 文件上传页面中,如果有多个文件域又有多个相对应的文件说明时, 文件和说明如何对应? 我们在表单中给对应的file变量和text变 ...
- .Net多文件同时上传(Jquery Uploadify)
前提:领导给了我一个文件夹,里面有4000千多张产品图片,每张图片已产品编号+产品名称命名,要求是让我把4000多张产品图片上传到服务器端,而且要以产品编码创建n个文件夹,每张图片放到对应的文件夹下. ...
随机推荐
- HDU 6396(2018多校第七场1011) Swordsman
场上场下各种TLE到怀疑人生...经过大佬指点之后才知道要用fread才能过,一般的快读不行... 题意:一个剑客打小怪兽,有n头小怪兽,剑客和小怪兽有m个属性.只有剑客的m个属性都大于等于某个小怪兽 ...
- No bean class specified on bean definition 解决方案
调试Spring项目出现No bean class specified on bean definition异常 但是控制台并没有给出其他相关信息了 这个时候可以在AbstractBeanDefini ...
- c# 类的初步认识
这里我们把类分为三种: String类(字符串类):Math类(数学类):DateTime类(时间日期类). 在使用类时注意 在输入的过程中代码前面会出现一些符号(紫色立方体代表方法,函数和黑色扳手 ...
- idea 修改Recent projects
idea用了一段时间了,打开的项目多了,导致Open Recent列表中的项目也非常多,在找一个项目时很不方便. 后来查询,在~/Library/Preferences/IntelliJIdea目录/ ...
- 杭电acm 1076题
水题,一个求闰年的题目,复习一下闰年的求法.... 1,如果能被4整除但不能被100整除的是闰年 2,能被400整除的是闰年 题目大意是:给定一个开始年份T以及一个正数N,要求求出从T开始,到了哪一年 ...
- 《Maven实战》笔记-4-生命周期和插件
除了坐标.依赖以及仓库外,Maven另外两个核心概念是生命周期和插件. 一.生命周期 Maven的生命周期是抽象的,其本身不做任务实际的工作,实际的任务(如编译源代码)都交由插件来完成. 三套生命周期 ...
- rpm bug
rpm无法安装 今天安装java时候,下载的rpm的包,但是用linux打开时候发现不能正常打开. 错误详情 主要是rpm安装时候的错误,java提示的错误就没有记录了. Reading packag ...
- 找BUG
找一找BUG 一段代码,实现一个pop,push,和getmin都是O(1)的方法. 最初源代码 伙伴代码如下,代码的地址可以通过这个访问: Ubuntu Pastebin https://paste ...
- TestNG入门
在Eclipse中安装TestNG 打开Eclipse Help ->Install New Software , 然后Add "http://beust.com/ecli ...
- jquery ajax 分页2
/* * 分页 $("#divPager").flexipager * 2015.03.17 */ //初始化列表默认属性 (function($) { $.addFlex = f ...