Spring MVC可以很方便用户进行WEB应用的开发，实现Model、View和Controller的分离，再结合Spring boot可以很方便、轻量级部署WEB应用，这里为大家介绍如何使用Spring MVC、Spring boot、JQuery实现视频文件的上传和播放服务。

工具/原料

 
  • Eclipse
  • Jdk 1.8
  • Spring
  • JQuery

方法/步骤

 
  1.  

    创建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>

  2.  

    参考之前输出的Spring MVC经验文档，实现视频文件的存储服务

    主要的视频文件存储服务接口类：StorageService.java

    视频文件存储服务实现类：FileSystemStorageService.java

  3.  

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

    }

  4.  

    将jQuery-File-Upload-9.19.2插件加入到静态文件目录static目录下

  5.  

    在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>

  6.  

    运行程序进行视频文件的上传测试

    1）运行application.java

    2）在浏览器中输入：http://localhost:8080/uploadVideo

    3）选择视频文件(mp4)进行上传操作，成功后可以在该页面中看到成功上传的视频文件

使用Spring和JQuery实现视频文件的上传和播放的更多相关文章

  1. Android使用OKHttp库实现视频文件的上传到服务器

    目录 1 服务器接口简介 2 Android端代码实现 2.1 xml布局文件 2.2 Activity类 2.3 Okhttp网络通信类 1 服务器接口简介 此处我使用的服务器接口是使用Flask编 ...

  2. Spring MVC 实现文件的上传和下载

    前些天一位江苏经贸的学弟跟我留言问了我这样一个问题:“用什么技术来实现一般网页上文件的上传和下载?是框架还是Java中的IO流”.我回复他说:“使用Spring MVC框架可以做到这一点,因为Spri ...

  3. 利用webuploader实现超大文件分片上传、断点续传

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

  4. java HTTP文件断点上传

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

  5. asp.net 如何实现大文件断点上传功能？

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

  6. jsp文件断点上传

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

  7. 视频大文件分片上传（使用webuploader插件）

    背景 公司做网盘系统,一直在调用图片服务器的接口上传图片,以前写的,以为简单改一改就可以用 最初要求 php 上传多种视频格式,支持大文件,并可以封面截图,时长统计 问题 1.上传到阿里云服务器,13 ...

  8. spring boot:单文件上传/多文件上传/表单中多个文件域上传(spring boot 2.3.2)

    一,表单中有多个文件域时如何实现说明和文件的对应? 1,说明和文件对应 文件上传页面中,如果有多个文件域又有多个相对应的文件说明时, 文件和说明如何对应? 我们在表单中给对应的file变量和text变 ...

  9. .Net多文件同时上传（Jquery Uploadify）

    前提:领导给了我一个文件夹,里面有4000千多张产品图片,每张图片已产品编号+产品名称命名,要求是让我把4000多张产品图片上传到服务器端,而且要以产品编码创建n个文件夹,每张图片放到对应的文件夹下. ...

随机推荐

  1. C++面向对象类的实例题目六

    问题描述: 编写一个程序计算两个给定长方形的面积,其中在设计类成员函数addarea()(用于计算两个长方形的总面积)时使用对象作为参数. 程序代码: #include<iostream> ...

  2. 在Linux里安装jdk

    一.系统环境说明: [操作系统]:Ubuntu 18.04.1 Desktop [JDK]:jdk1.8.0_181,文件名称:jdk-8u181-linux-x64.tar 二.准备jdk文件 下载 ...

  3. [转载]HTTP的无状态是什么意思？

    文章地址:https://www.cnblogs.com/bellkosmos/p/5237146.html#commentform 作者:赛艇队长 引子: 最近在好好了解http,发现对介绍http ...

  4. linux安装thrift

    安装配置Thrift Thrift的编译器使用C++编写的,在安装编译器之前,首先应该保证操作系统基本环境支持C++的编译,安装相关依赖的软件包,如下所示 sudo yum install autom ...

  5. [学习笔记]fork深入理解

    #include<stdio.h> #include<stdlib.h> #include<string.h> #include <unistd.h> ...

  6. SpringMVC路径问题回顾，加斜杠和不加斜杠的问题(六)

    绝对路径:全的路径. 相对路径:有参照的路径. 加斜杠和不加斜杠的问题如下:(分前台和后台路径,明白这两个就知道什么意思了) 如果是页面,这个图片路径出现在jsp页面,所以是前台路径,前台路径的参照物 ...

  7. 使用LogParser 将iis日志导入到数据库中

    --注意修改日志位置和表名--u_ex180228.log 日志所在位置 --IISLog 表名--IISLog_table_0228 表名"C:\Program Files (x86)\L ...

  8. 【规律】Gym 100739L Many recursions

    给出a,求递归式g(k)的初始条件g(0); 可以看出来g(a) = 1,从后往前推.写个模拟程序可以看出来其实g(0) = 2^a,那么就是一个简单地快速幂取模问题了. #include <c ...

  9. P4332 [SHOI2014]三叉神经树

    \(\color{#0066ff}{ 题目描述 }\) 计算神经学作为新兴的交叉学科近些年来一直是学术界的热点.一种叫做SHOI 的神经组织因为其和近日发现的化合物 SHTSC 的密切联系引起了人们的 ...

  10. P4213 【模板】杜教筛（Sum）

    \(\color{#0066ff}{题 目 描 述}\) 给定一个正整数\(N(N\le2^{31}-1)\) 求 \(\begin{aligned} ans_1=\sum_{i=1}^n\varph ...