springMVC前后端全套的视频上传源码（入门就能看懂）

最新推荐文章于 2023-08-08 22:24:05 发布
最新推荐文章于 2023-08-08 22:24:05 发布
阅读量2k 收藏 4
点赞数 3
文章标签： 音视频 html java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rrgef/article/details/121743029
版权

前端上传样式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<#--  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  -->
	<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
	<title>添加视频表</title>
	<#include "/common/global_css.ftl">
	<link href="${request.getContextPath()}/css/validform/style.css" rel="stylesheet" type="text/css" media="all"/>
	<link href="${request.getContextPath()}/css/chosen/chosen.css" rel="stylesheet" type="text/css"/>
	<style type="text/css">
		body{margin:0px;font-size:12px;color:#999;}
		.form{overflow:auto;background:#F7F7F7;height:205px;}
	</style>
</head>
<body>
	<div class="form">
		<form class="addForm" target="_parent" id="videoAddForm" action="${request.getContextPath()}/course/video/saveVideo" method="post" enctype="multipart/form-data">
			<input type="hidden" id="pageContext" value="${request.getContextPath()}" />
			<input type="hidden" name="partnerId" value="${Session.partnerId}"/>
			<table border="0" cellspacing="0" cellpadding="0" width="100%" style="margin-top:20px;" class="boxTable boxmar">
					<tr>
		            	<td align="right" style="width:150px"><span class="check">*</span>视频名称：</td>
		      			<td style="width:150px">
		      				<input name="videoName" id="videoName" class="cword" datatype="s2-16" nullmsg="请输入视频名称！" errormsg="视频名称至少2个字符,最多16个字符！"/>
		            	</td>
		            	<td>
	    					<div class="Validform_checktip"></div>
	    				</td>
		            </tr>
		            <tr>
		            	<td align="right" style="width:150px"><span class="check">*</span>视频路径保利威vid：</td>
		      			<td style="width:150px">
		      				<input name="videoPath" id="videoPath" class="cword" readonly="readonly" datatype="*" nullmsg="请上传视频！"/>
		            	</td>
		            	<td>
	    					(无需输入)<div class="Validform_checktip"></div>
	    				</td>
		            </tr>
		            <tr>
		            	<td align="right" style="width:80px"><span class="check">*</span>视频上传：</td>
		      			<td colspan="2" style="width:150px">
							<input type="file" id="mp4" style="width:188px;"/>
		      				<input type="button" class="btn" value="上传" onclick="uploadFiles()">
		            	</td>
		            </tr>
	            <tr align="center">
    				<td colspan="3">
    					<input class="btn" type="button" id="saveBtn" value="保存">
    					<input type="button" class="btn dis cancel" id="cancelBtn" value="取消">
    				</td>
  				</tr>
	  		</table>
		</form>
	</div>
	<script type="text/javascript" src="${request.getContextPath()}/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="${request.getContextPath()}/js/utils/jbox/jquery.jBox.src.js"></script>
	<script type="text/javascript" src="${request.getContextPath()}/js/utils/jbox/jquery.jBox-zh-CN.js"></script>
	<script type="text/javascript" src="${request.getContextPath()}/js/allPage.js" contextPath="${request.getContextPath()}"  id="allPageJs"></script>
	<script type="text/javascript" src="${request.getContextPath()}/js/utils/validform/Validform_v5.3.2.js"></script>
	<script type="text/javascript" src="${request.getContextPath()}/js/utils/chosen/chosen.jquery.min.js"></script>
	<script type="text/javascript" src="${request.getContextPath()}/js/my97date/WdatePicker.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#videoAddForm').Validform({
				btnSubmit:"#saveBtn", 
				tiptype:2,
				showAllError:true
			});
			$('.chosen').chosen({
				"no_results_text":'未找到匹配数据!',
				"width":"120px",
				"allow_single_deselect":true
			});
			$('#cancelBtn').click(function(){
				parent.jBox.close(true);
			});
		});
		//上传视频到本地服务器
		function uploadFiles(){
		 	 var videoName=$("#videoName").val();
		 	 var title="";
		 	 if(videoName==""||videoName==null){
		 	 	title=$('#mp4')[0].files[0].name.substring(0,$('#mp4')[0].files[0].name.indexOf("."));
		 	 }else{
		 	 	title=videoName;
		 	 }
		 	 $("#JSONRPC").val("{'title':'"+title+"','tag':'无','desc':'视频文件'}");
		 	 console.log($("#JSONRPC").val());
			var myFormData = new FormData();
			myFormData.append('mp4',$('#mp4')[0].files[0]);
			console.log($('#mp4')[0].files[0]);
			var index= $('#mp4')[0].files[0].name.lastIndexOf(".");
			//获取后缀
			var ext = $('#mp4')[0].files[0].name.substr(index+1);
		     	$.ajax({
		           type:"post",
		           url:"${request.getContextPath()}/uploadfile/uploadMp4",
		           data:myFormData,
		           cache: false,
		           async:false,
		           processData: false,
		           contentType: false,
		           success:function(data) {
					    parent.jBox.tip('上传已完成。', 'success');
		           		console.log(data);
			       },error:function(data) {
			       		console.log(data);
			       }
			  });
	}	
	</script>
</body>
</html>

后端代码：

package com.nuocai.modules.uploadfile.controller;

import java.io.File;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.nuocai.core.common.utils.upload.FileUploadConstants;
import com.nuocai.core.mybase.Constants;

@Controller
@RequestMapping("/uploadfile")
public class UploadController {
	//获取到真是路径
	private static String getSavePath(String proVal) {

		if (proVal != null && proVal.equals("")) {
			proVal = "";
		}
		String saveFilePath = FileUploadConstants.getPropValue(proVal);
		if (saveFilePath == null || saveFilePath.equals("")) {
			return null;
		}
		if (!saveFilePath.endsWith("/"))
			saveFilePath += "/";
		// 生成文件保存路径
		File aSaveFile = new File(saveFilePath);
		if (!aSaveFile.isDirectory())
			aSaveFile.mkdirs();
		return saveFilePath;
	}
	/**
	 * UUID命名
	 * 
	 */
	public static String reFileNameByUUID(String filePath, String fileName) {
		String uFileName = UUID.randomUUID().toString();
		uFileName = uFileName.substring(0, 8) + uFileName.substring(9, 13) + uFileName.substring(14, 18) + uFileName.substring(19, 23) + uFileName.substring(24);
		int p = fileName.lastIndexOf(".");
		fileName = uFileName + fileName.substring(p, fileName.length());
		File file = new File(filePath + fileName);
		if (file.exists()) {
			fileName = reFileNameByUUID(filePath, fileName);
		}
		return fileName;
	}
	//**********************uploadMp4***************
	@SuppressWarnings("unused")
	@ResponseBody
	@RequestMapping(value = { "/uploadMp4" }, method = RequestMethod.POST)
	public String uploadMp4(HttpServletRequest request, @RequestParam(value = "mp4", required = false) MultipartFile file) throws Exception {
		String savePath = getSavePath("FILE_PATH_Mp4");
		String path = savePath;// 文件路径
		if (file != null) {// 判断上传的文件是否为空
			String type = null;// 文件类型
			String fileName = file.getOriginalFilename();// 文件原名称
			fileName = reFileNameByUUID(savePath, fileName);
			// 判断文件类型
			type = fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null;
			if (type != null) {// 判断文件类型是否为空
				if ("mp4".equals(type)) {
					// 项目在容器中实际发布运行的根路径
					String realPath = request.getSession().getServletContext().getRealPath("/");
					// 自定义的文件名称
					String trueFileName = String.valueOf(System.currentTimeMillis()) + "." + type;
					// 设置存放图片文件的路径
					path = savePath + fileName;
					System.out.println("存放视频文件的路径:" + savePath);
					// 转存文件到指定的路径
					file.transferTo(new File(path));
					return Constants.SAVE_FILE_MP4 + fileName;
				}
			} else {
				return "false";
			}
		} else {
			return "false";
		}
		return "false";	
	}
}

后端所需要的工具类：

package com.nuocai.core.common.utils.upload;
import java.io.InputStream;
import java.util.Properties;

public class FileUploadConstants {
	public static String EXCELPATH_USER = "";
	
	private static Properties prop=null;
	
	static{
		String path="/config/fileUploadSavePath_windows.properties";
		if(isLinux()){
			path="/config/fileUploadSavePath_linux.properties";
		}
		InputStream in=FileUploadConstants.class.getResourceAsStream(path);
		if(in!=null){
			prop=new Properties();
			try {
				prop.load(in);
				EXCELPATH_USER=prop.getProperty("EXCELPATH_USER");
			} catch (Exception e) {
				throw new RuntimeException(e);
			}
		}
	}
	
	public static String getPropValue(String key){
		String path="/config/fileupload/fileUploadSavePath_windows.properties";
		String val = null;
		if(isLinux()){
			path="/config/fileupload/fileUploadSavePath_linux.properties";
		}
		InputStream in=FileUploadConstants.class.getResourceAsStream(path);
		if(in!=null){
			prop=new Properties();
			try {
				prop.load(in);
				val = prop.getProperty(key);
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		return val;
	}
	
	public  static boolean isLinux(){
		String osType = System.getProperties().getProperty("os.name").toLowerCase();
		if(osType.startsWith("windows")){
			return false;
		}
		else{
			return true;
		}
	}
}




package com.nuocai.core.mybase;

import com.nuocai.core.common.utils.upload.FileUploadConstants;
import com.nuocai.core.myutil.PropertiesLoader;


/**
 * 全局常量
 * 
 * @author zj
 * 
 */
public abstract class Constants {

	/**
     * 文件存储路径
     */
    public static final String SAVE_FILE_JS="http://static.gswldx.com/js/";
    public static final String SAVE_FILE_CSS="http://static.gswldx.com/css/";
    public static final String SAVE_FILE_IMAGE="http://static.gswldx.com/image/";
    public static final String SAVE_FILE_MP4="http://static.gswldx.com/Mp4/";
    public static final String SAVE_FILE_EXCEL="http://static.gswldx.com/upload/excel/";
    public static final String SAVE_FILE_FILES="http://static.gswldx.com/file/";
}

最好就是Nginx动静分离配置：

server {
	listen       80;
	server_name  static.gswldx.com;
	access_log  static.yijian119.com.access.log;
	location / {		
		#location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css)$ {
        	#        valid_referers *.wafutech.com;
                #	if ($invalid_referer) {
                #        	return 403;
                #	}
        	#}

		root   C:/web/project/js_css_static/;
		#index  index.html index.htm;
	}

}

最后需要注意的时，当文件视频过于大的时候，此时就需要去配置文件里面修改MultipartFile的文件限制大小，完毕，小白直接粘贴也可以看懂，加油！

赖皮蛇化真龙
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
php - 基于 webuploader 视频大文件分片分段上传，支持断点续传（刷新、关闭页面、重新上传、网络中断等情况）带进度条，前端后端都有示例源码详细教程
高级前端工程师
02-20 6506
php大文件(视频)分段上传，php实现大文件上传分片上传断点续传，php 上传视频(分片) ，PHP实现视频文件上传完整实例，如何使用PHP实现同时上传多视频的功能，php分片上传视频，php 视频分片上传，php切片处理视频大文件源代码，php - 视频文件分片问题，PHP实现大文件分割上传与分片上传，用php怎么对视频进行分割，php ffmpeg 视频截取 视频切片，PHP大文件分割上传 PHP分片上传，用php怎么对视频进行分割，php WebUploader 分片上传，PHP使用webuploa
web/java实现多种格式视频上传、转码、截图、播放、下载等功能附源码（详细）
热门推荐
空空说技术的博客
08-16 4万+
web /java 实现多种格式视频上传、转码、播放、下载 1.前言 前段时间一直在做一个生物资源共享平台，采用SSM框架技术，其中涉及一个模块，是关于视频资源的播放。 本来不是很大的问题，但是无奈用户要求较多，需要支持N种格式的视频播放，没有办法，转码是必不可少的了。 对于一个从来没接触过这些什么音频视频编码格式的我，浪费了很长时间，其中很多博客的教学都不太完善。 反正就是有一堆麻烦事...
最新首途影视视频网站源码/二十二套带后台版全开源无加密源码
weixin_45892228的博客
03-13 7882
最新首途二十二套带后台版全开源无加密源码 菜单填写格式：MyTheme主题,/template/mytheme/admin/默认账号：admin默认密码：admin。
上传视频功能源码 附带转码解码工具 jar包 C过去就可以用
10-30
关于上传的代码都在压缩包里头了，copy过去就可以使用，附带解码转码工具！
网页直播源码，Android 上传图片或视频
云豹网络科技
05-21 364
网页直播源码，Android 上传图片或视频实现的相关代码 1.通过OkhttpClient上传，首先添加OKHTTP的依赖 implementation 'com.squareup.okhttp3:okhttp:3.13.1' //selImageList 图片或视频的地址路径 //此处图片和视频的命名规则为 VID_+时间+.mp4 ,IMG_+时间+.jpg //此处图片和视频的路径如：/storage/emulated/0/DCIM/Camera/IMG_20200323_135044.jpg p
springmvc+mybatis全套视频详解及源码
10-20
springmvc+mybatis全套视频详解及源码 百度盘链接，有需要的朋友可以下载学学，多学点技术没什么坏处
传智播客_Springmvc+Mybatis由浅入深全套视频教案（带源码）.zip
01-08
《SpringMVC+MyBatis 由浅入深全套视频教程》是一套全面解析SpringMVC和MyBatis两大主流Java Web开发框架的教程。该教程由知名教育机构传智播客出品，旨在帮助初学者及进阶者深入理解并掌握这两个框架的核心概念和...
web前后端分离开发——后端SpringMVC java开发
06-04
web前后端分离开发，后端SpringMVC java开发内含spirngMVC代码以及java-json处理包 详细内容可以参考我的博客https://blog.csdn.net/weixin_38879056/article/details/90758420 以及配套的前端vue项目...
java 企业官网 前后端 springMVC 保证运行
11-04
java 企业官网 前后端 springMVC 保证运行，带完整数据库和代码。运行之后展示端访问路径http://localhost:8080/enterprise/index，管理端访问路径http://localhost:8080/enterprise/manage/user/home,后续修改展示...
Springmvc和ajax如何实现前后端交互
08-19
Springmvc和ajax实现前后端交互的技术要点 在软件开发中，前后端交互是非常重要的一环，特别是在Web应用中。 Springmvc和ajax是实现前后端交互的两个常用的技术，今天我们就来详细介绍如何使用Springmvc和ajax实现...
传智播客SpringMvc完整视频+完整笔记+源码+相关资源
10-13
传智播客SpringMvc完整视频+完整笔记+源码+相关资源。
传智播客 springmvc 视频 源代码 文档
10-23
传智播客 springmvc视频 源代码 文档，一共4天的资料，因一次只能上传600MB，分6次上传. 本次是mybatis第1天，资料是完整的。
尚硅谷springmvc视频+源码
09-11
尚硅谷springmvc
尚硅谷佟刚老师SpringMVC视频教程百度云（含源码和PPT）
05-11
TXT中含尚硅谷佟刚老师SpringMVC视频教程百度云链接和密码，老师讲的非常精彩，现分享出来欢迎大家下载
SpringMvc深入理解源码分析视频
05-13
SpringMvc深入理解源码分析SpringMvc深入理解源码分析SpringMvc深入理解源码分析SpringMvc深入理解源码分析SpringMvc深入理解源码分析
微信小程序实现上传视屏并编辑
weixin_45695686的博客
05-03 2272
本文是实现用户上传视频并可以在线播放的功能，视频上传到云存储，并在云数据库中添加记录。 下面包含：1效果截图及截图说明，2实现步骤及源码。
Java Web简化版本大文件分片上传（含前端+后端）
Staba的博客
11-02 1102
本着能调参数就不改代码的原则，尝试通过调整JVM来实现大文件上传，最后发现不可行，因为虽然上传的是2G文件，但是实际占用的内存却远远大于2G。于是，我按照自己的想法，写了一个简单版本的文件分片上传，简单主要是简单在后台处理上面进行了各种简化，使得文件分片上传更加简单明了。前端的文件分片上传组件，我这里使用的是WebUploader，使用成熟组件的好处是：不用自己写文件切割的相关逻辑，所有分片文件请求发送完毕之后，会触发一个最终确认的请求。迫于无奈，只能对文件上传接口进行改造，使用较为通用的文件分片上传。
java+上传文件夹
Mr_Zang666的博客
08-22 725
我们平时经常做的是上传文件，上传文件夹与上传文件类似，但也有一些不同之处，这次做了上传文件夹就记录下以备后用。 首先我们需要了解的是上传文件三要素： 1.表单提交方式:post (get方式提交有大小限制,post没有) 2.表单的enctype属性:必须设置为multipart/form-data. 3.表单必须有文件上传项:file，且文件项需要给定name值 上传文件夹需要增加一个...
记录一下后端实现上传视频的整体代码及流程
weixin_42888110的博客
08-08 518
文件上传
springmvc前后端数据传递
最新发布
09-09
在SpringMVC中，前后端数据传递可以通过多种方式实现。以下是几种常见的方法： 1. 前端传后端： - 直接传入参数：可以在Controller方法的参数列表中声明需要接收的参数，SpringMVC会自动将前端传入的参数值绑定到方法的参数上。例如：`public String hello(String name)`。 - 使用@RequestParam注解：通过@RequestParam注解可以获取前端传入的参数，并进行进一步的处理。例如：`public String hello(@RequestParam String name)`。这样可以控制参数是否为必需，并且可以设置默认值。 - 在@RequestMapping中设置参数属性：可以在@RequestMapping注解中使用params属性来指定需要接收的参数，只有当参数存在时才会执行方法体内的逻辑。例如：`@RequestMapping(value = "/hello.do",method = RequestMethod.GET,params = "name")`。 2. 后端向前端传参： - 使用ModelAndView：可以在Controller方法中创建一个ModelAndView对象，并使用addObject方法添加需要传递的参数。例如：`ModelAndView mv = new ModelAndView(); mv.addObject("name","admin");`。然后可以通过setViewName方法来设置返回的视图。 以上是几种常见的SpringMVC前后端数据传递的方法，你可以根据具体的需求选择适合的方式来实现数据传递。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值