![如何快速学习：[1]Swift编程语言](https://exp-picture.cdn.bcebos.com/fb738d9c2cf7dfb2f57a949fd01b1edef5dc13fa.jpg)
如何快速学习：[1]Swift编程语言,Swift，苹果于2014年WWDC（苹果开发者大会）发布的新开发语言，可与Ojective-C*共同运行于MacOS和iOS平台，用于搭建基于苹果平台的应用程......
2023-03-17 350 编程语言
使用Spring和JQuery实现视频文件的上传和播放
来源：互联网
2023-03-17 00:18:21 版权归原作者所有，如有侵权，请联系我们
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,Springthymeleaf,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
2Spring MVC/Spring Boot实现图片文件上传和显示
在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)进行上传操作，成功后可以在该页面中看到成功上传的视频文件
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： 编程语言
相关文章
- 详细阅读
-
web图表开发工具FineReport：[11]连续分组详细阅读
![web图表开发工具FineReport：[11]连续分组](https://exp-picture.cdn.bcebos.com/6002c9d4483104eb360a59bb092b74ee1d324e01.jpg)
web图表开发工具FineReport：[11]连续分组,数据库表数据是按照时间先后录入的，查询的时候希望按照时间先后，某个字段连续相同的话就合并起来显示，这样的报表可以通过相邻连续分组来实现。......
2023-03-17 574 编程语言
- 详细阅读
