上传video到tomcat的小Demo

最新推荐文章于 2024-03-24 21:58:19 发布

Msx云南人

最新推荐文章于 2024-03-24 21:58:19 发布

阅读量439

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/qq_42402783/article/details/85071736

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1，导入JS文件

哈哈，大家共同学习吧！！

<script src="../plugins/jQuery/jquery-2.2.3.min.js" type="text/javascript"></script>
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet">

video是https无需导入使用的脚本是video.js 可以百度一下

2，body里的代码如下

写的很简单，因为是一个小案列，应该对你们可以用

  选择文件:<input type="file" id="file1" /><br />
        <input type="button" id="upload" value="上传" />
       <video id="editvideoid" src="#" class="video-js" controls="controls" preload="auto" width="400px" height="200px" data-setup="{}">
								 
		 <source  type='video/mp4' > 
		 <source src="MY_VIDEO.webm" type='video/webm'>
			  <p class="vjs-no-js">
			To view this video please enable JavaScript, and consider upgrading to a web browser that
			  <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
			 </p>
			 </video>

常用的视频格式
flv格式是加入关联扩展名：.flv，内容类型：application/octet-stream
f4v格式是扩展名：.f4v，内容类型：application/octet-stream
mp4格式是扩展名：.mp4，内容类型：video/mp4
ogv格式是扩展名：.ogv ，内容类型：video/ogg
webm格式是扩展名：.webm，内容类型：video/webm

3，写JS的代码

FormData的异步文件上传

FormData对象可以让我们组织一个使用XMLHttpRequest对象发送的键值对的集合。它主要用于发送表单数据,但是可以独立于使用表单传输的数据。1

需要了解更多FormData对象的可以点击这里

<script type="text/javascript">
$(function () {
    $("#upload").click(function () {
        var formData = new FormData();
        formData.append("files", document.getElementById("file1").files[0]);   
        $.ajax({
        	         type:'POST',
        	         url:"upload.do",
        	         data:formData,
        	         contentType:false,
        	         processData:false,//这个很有必要，不然不行
        	         dataType:"json",
        	         mimeType:"multipart/form-data",
        	         success:function(data){
        	                if(data.success){
		   						 $("#editvideoid").attr('src','http://localhost:8080/yunto/files/'+data.message);
        	                }else{
        	                     alert(data.message);
        	                }
        	            }
        	     });
    });
});
</script>

4，业务逻辑代码

相信聪明的你一定可以看懂

@ResponseBody
	@RequestMapping("/upload")
	public Object upload(HttpServletRequest request,@RequestParam( value="files",required=false)MultipartFile multipartFile) throws IllegalStateException, IOException {//这里一定要写required=false 不然前端不传文件一定报错。到不了后台。
		String realpath="";
        //获取文件名
        String name="";
        if(multipartFile!=null){
        	long size= multipartFile.getSize();
        	if(size>5242880){//文件设置大小，我这里设置5M。
        		return new Result(false,"上传失败");
        	}
        	name=multipartFile.getOriginalFilename();//直接返回文件的名字
        	String subffix = name.substring(name.lastIndexOf(".") + 1, name.length());//我这里取得文件后缀
        	String fileName=new SimpleDateFormat("yyyyMMddHHmmss").format(new Date());//文件保存进来，我给他重新命名，数据库保存有原本的名字，所以输出的时候再把他附上原本的名字就行了。
        	String filepath=request.getSession().getServletContext().getRealPath("/")+"files\\";//获取项目路径到webapp
        	File file=new File(filepath);
        	if(!file.exists()){//目录不存在就创建
        		file.mkdirs();
        	}
        	multipartFile.transferTo(new File(file+"\\"+fileName+"."+subffix));//保存文件
        	realpath = fileName+ "." + subffix ;
        }
        return new Result(true,realpath);
	}