上传video到tomcat的小Demo

1，导入JS文件

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

<  src=\"../plugins/jQuery/jquery-2.2.3.min.js\" type=\"text/ \"></ >
<  src=\"https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js\"></ >
<  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  , and consider upgrading to a web browser that
			  <a href=\"https://videojs.com/html5-video-support/\" target=\"_blank\">supports HTML5 video</a>
			 </p>
			 </video> 

3，写JS的代码

FormData的异步文件上传

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

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

<  type=\"text/ \">
$(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);
        	                }
        	            }
        	     });
    });
});
</ >

4，业务逻辑代码

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

@ResponseBody
	@RequestMapping(\"/upload\")
	public   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);
	}

5，测试

我们来测试一下看看
完美运行，有需要的小伙伴去试试吧