zoukankan      html  css  js  c++  java
  • 使用Spring和JQuery实现视频文件的上传和播放

    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

      使用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实现视频文件的上传和播放
  • 相关阅读:
    How to build Linux system from kernel to UI layer
    Writing USB driver for Android
    Xposed Framework for Android 8.x Oreo is released (in beta)
    Linux Smartphone Operating Systems You Can Install Today
    Librem 5 Leads New Wave of Open Source Mobile Linux Contenders
    GUADEC: porting GNOME to Android
    Librem 5 – A Security and Privacy Focused Phone
    GNOME and KDE Join Librem 5 Linux Smartphone Party
    Purism计划推出安全开源的Linux Librem 5智能手机
    国产系统之殇:你知道的这些系统都是国外的
  • 原文地址:https://www.cnblogs.com/Firesun/p/9999017.html
Copyright © 2011-2022 走看看