使用Spring和JQuery实现视频文件的上传和播放

最新推荐文章于 2022-04-20 21:25:10 发布
最新推荐文章于 2022-04-20 21:25:10 发布
阅读量107 收藏
点赞数
分类专栏： 软件工程 文章标签： java python vue spring js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WeiWeiWqq/article/details/121434406
版权

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>

    使用Spring和JQuery实现视频文件的上传和播放

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

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

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

    1Spring MVC/Spring Boot实现图片文件上传和显示

    使用Spring和JQuery实现视频文件的上传和播放

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

        }

    使用Spring和JQuery实现视频文件的上传和播放

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

    使用Spring和JQuery实现视频文件的上传和播放

  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>

    使用Spring和JQuery实现视频文件的上传和播放

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

    1)运行application.java

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

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

    使用Spring和JQuery实现视频文件的上传和播放
    使用Spring和JQuery实现视频文件的上传和播放
    使用Spring和JQuery实现视频文件的上传和播放
WFiresun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 上传图片或视频 批量上传
ylp的博客
07-30 4331
样式根据个人需要修改 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,...
jQuery文件上传插件(支持拖动上传)
04-12
jQuery文件上传插件(支持拖动上传) ie10 firefox
将文件保存Blob字段，再读取最后下载文件
平肆安歌的博客
09-18 702
1.1获取本地文件 File file = new File("E:\\test\\test.pdf"); FileInputStream in = new FileInputStream(file); 1.2保存Blob到数据库 jdbcTemplate.execute(sql, new PreparedStatementCallback() { @Override public Object doInPreparedStatement(Prepared
一个简单的图片预览
在夜里奔跑的人
01-03 408
//图片预览             $("#prodimg").change(function () {                 var objUrl = getObjectURL(this.files[0]);                 console.log("objUrl = " + objUrl);                 if (objUrl) {  
java大文件(百M以上)的上传下载讨论
Mr_Zang666的博客
09-22 630
一、 功能性需求与非功能性需求 要求操作便利，一次选择多个文件和文件夹进行上传； 支持PC端全平台操作系统，Windows,Linux,Mac 支持文件和文件夹的批量下载，断点续传。刷新页面后继续传输。关闭浏览器后保留进度信息。 支持文件夹批量上传下载，服务器端保留文件夹层级结构，服务器端文件夹层级结构与本地相同。 支持大文件批量上传（20G）和下载，同时需要保证上传期间用户电脑不出现卡死等体验； 支持文件夹上传，文件夹中的文件数量达到1万个以上，且包含层级结构。 支持断点续传，关闭浏览器或刷新浏
使用Spring boot + jQuery上传文件(kotlin)功能实例详解
10-19
本文通过实例代码给大家介绍了使用Spring boot + jQuery上传文件(kotlin) 功能,需要的朋友可以参考下
Spring Boot + thymeleaf 实现文件上传下载功能
08-28
本文详细介绍了如何使用 Spring Boot 和 Thymeleaf 实现文件上传下载功能，包括项目初始化、依赖项配置、控制器编写、模板渲染和文件上传下载逻辑等内容。 知识点： * Spring Boot 项目初始化 * Thymeleaf 模板...
SpringMVC + jquery.uploadify实现上传文件功能
10-19
本文将详细讲解如何结合jQuery的uploadify插件，在SpringMVC环境中实现文件上传功能。 首先，让我们了解文件上传的基本原理。在传统的HTML表单提交中，如果表单包含`enctype="multipart/form-data"`属性，那么...
利用SpringMVC和Ajax实现文件上传功能
08-25
在本文中，我们将深入探讨如何利用SpringMVC和Ajax实现文件上传功能，这对于现代Web应用程序来说是一个常见的需求。首先，我们需要了解SpringMVC是Spring框架的一部分，它提供了一个用于处理HTTP请求和响应的强大...
jquery ajax实现文件上传功能实例代码
12-03
在本文中，我们将深入探讨如何使用jQuery AJAX实现文件上传功能，包括单文件和多文件上传。文件上传在现代Web应用中是一项重要的功能，它允许用户上传各种类型的数据，如图片、文档等。jQuery是一个广泛使用的...
jQuery文件上传(中文API+Demo)
06-10
jQuery文件上传(中文API+Demo)，asp.net文件上传、存储
Jquery实现 视频 伪 预览
04-06
外嵌代码视频无法自设预览图.黑黑的不美观.这个方法可以解决这个问题.
Jquery异步上传 ajax上传 php异步上传
12-02
php ajax异步上传 使用jquery
java大文件(百M以上)的上传下载方法
weixin_45525177的博客
09-17 3362
核心原理： 该项目核心就是文件分块上传。前后端要高度配合，需要双方约定好一些数据，才能完成大文件分块，我们在项目中要重点解决的以下问题。 *如何分片； *如何合成一个文件； *中断了从哪个分片开始。 如何分，利用强大的js库，来减轻我们的工作，市场上已经能有关于大文件分块的轮子，虽然程序员的天性曾迫使我重新造轮子。但是因为时间的关系还有工作的关系，我只能罢休了。最后我选择了百度的WebUploader来实现前端所需。 如何合，在合之前，我们还得先解决一个问题，我们如何区分分块所属那个...
使用jquery实现文件上传的步骤
m0_62962469的博客
04-20 9729
1.定义UI结构 <!-- 导入jquery --> <script src="../lib/jquery.js"></script> <!-- 文件选择框 --> <input type="file" id="file1" /> <!-- 上传文件按钮 --> <button id="btnUpload">上传文件</button> 2.判断是否选择了文件 $(function () {
jquery-uploadifyv3.2.1 文件上传插件 学习
weixin_30505043的博客
10-31 125
先认识一下他的属性。 var settings = $.extend({ // Required Settings，这3个必须的咯。 id : $this.attr('id'), // The ID of the DOM object，ID ...
SpringBoot实现上传图片或视频
曰业而安的博客
07-20 5210
在之前负责的项目中有这样的一个场景，用户发布动态，可以上传图片或视频。本博客特意对此做出一个小结，高手可以忽略，不喜勿喷！欢迎看到的小伙伴提出宝贵意见。 我在这里提供了一个工具类： package com.pf.bindDate.utils; import org.springframework.stereotype.Component; import org.springframework.web.multipart.MultipartFile; import java.io.Buf...
jquery.fileupload.js插件使用--单视频或音频上传预览
热门推荐
smm188的博客
02-26 3万+
一、前台代码： jquery.fileupload.js使用测试 .bar { margin-top:10px; height:10px; max-width: 300px; background: green;
jQuery实现视频转base64及上传
cccdf_jjj的博客
12-15 1万+
部分HTML代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport" content=&qu
FileUpload 上传视频文件简单实例
德魁_博客
02-06 1万+
我们都知道 当Html input  标签类型为file时 同时将from 表单元素的enctype属性设置为 multipart/form-data 这样就可以上传文件 ，但是这种方式 只能上传文本文件 不能上传视频 文件。这时出现了功能强大的第三方js工具类 fileupload 实现了任何类型的文件都能上传  例子如下： 视频上传
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值