SSM框架上传视频（带进度条）

SSM框架上传视频，并且显示进度条，如下所示：

首先，配置spring-mvc.xml，如下所示，默认值是不超过500左右！

 <!-- 文件上传的配置 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 指定所上传文件的总大小不能超过500MB。注意maxUploadSize属性的限制不 是针对单个文件，而是所有文件的容量之和 -->
    <property name="maxUploadSize" value="524288000"></property>
    </bean>

JSP代码如下：

<!-- 视频上传 -->
			<div class="form-group" id="passwordDiv" style="width:100%">
				<label class="col-sm-2 control-label">上传视频：</label>
				<div class="col-xs-2">
				<input type="file" id="batchFile" >
		        <lable id="lableok" style="display: none">
		        <i class="glyphicon glyphicon-ok"></i>上传成功</lable>
				</div>
		    </div>
		    <div class="form-group" style="width:100%;margin-left:5%">
		    	<div class="col-xs-2">
		    	<div class="progress progress-striped active" style="display: none">
			    <div id="progressBar" class="progress-bar progress-bar-info"role="progressbar" aria-valuemin="0" aria-valuenow="0"aria-valuemax="100" style="width: 0%">
			        </div>
		      		</div>
		    	</div>
		    </div>
		    <div class="form-group" style="width:100%;margin-left:5%">
		    	<div class="col-xs-2">
		    		<input id="batchUploadBtn" type="submit" name="submit" class="btn btn-success" value="上传" />
		    	</div>
		    </div>
  		 </div>

点击上传按钮时，用JS对文件进行判断是否是视频类型，截取文件的后缀名进行判断，也可以用正则表达式。

 // 上传按钮
	    $("#batchUploadBtn").attr('disabled', true);
	    // 上传文件按钮点击的时候
	    $("#batchUploadBtn").click(function() {
		 var tv_id =document.getElementById('batchFile').value;//根据id得到值
		 var index= tv_id.indexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
		 tv_id=tv_id.substring(index); //截断"."之前的，得到后缀
		     if(tv_id!=".mp4"&&tv_id!=".rmvb"&&tv_id!=".avi"&&tv_id!=".ts"&& tv_id !=".mov" ){ //根据后缀，判断是否符合视频格式
		         alert("不是指定视频格式,重新选择"); 
		       return false;
		  }
	        // 进度条归零
	        $("#progressBar").width("0%");
	        // 上传按钮禁用
	        $(this).attr('disabled', true);
	        // 进度条显示
	        $("#progressBar").parent().show();
	        $("#progressBar").parent().addClass("active");
	        // 上传文件
	        UpladFile();
	    })
	     // 文件修改时
	    $("#batchFile").change(function() {
	        $("#batchUploadBtn").val("上传");
	        $("#progressBar").width("0%");
	        var file = $(this).prop('files');
	        if (file.length != 0) {
	            $("#batchUploadBtn").attr('disabled', false);
	        }
	    });
	     function UpladFile() {
	        var fileObj = $("#batchFile").get(0).files[0]; // js 获取文件对象
	        console.info("上传的文件："+fileObj);
	        var FileController = "${ctx}/index/jindutiaoupload.do"; // 接收上传文件的后台地址 
	        var form = new FormData();
	        form.append("file", fileObj); // 文件对象
	        var xhr = new XMLHttpRequest();
	        xhr.open("post", FileController, true);
	        xhr.onload = function() {
	            $("#lableok").show();
	            $("#batchUploadBtn").attr('disabled', false);
	            $("#batchUploadBtn").val("上传");
	            $("#progressBar").parent().removeClass("active");
	            $("#progressBar").parent().hide();
	        };
	        xhr.upload.addEventListener("progress", progressFunction, false);
	        xhr.send(form);
	    };
	    
	    function progressFunction(evt) {
	        var progressBar = $("#progressBar");
	        if (evt.lengthComputable) {
	            var completePercent = Math.round(evt.loaded / evt.total * 100)+ "%";
	            progressBar.width(completePercent);
	            $("#batchUploadBtn").val("正在上传 " + completePercent);
	        }
	    };

如果修改成其他文件，继续保持原来页面状态。

确认上传且后缀名正确的时候，传到后台，进行上传本地

后台上传方法，我的路径是直接上传到Tomcat服务器的项目里，也可以上传到其他地方，在上传Tomcat的弊端就是，当项目从Tomcat移除后，可能上传的视频也就不存在，不建议上传Tomcat。

// 处理上传的
    @RequestMapping("/jindutiaoupload")
    public void uploadvideo(HttpServletResponse response,HttpServletRequest request,
            @RequestParam("file") CommonsMultipartFile file) throws IOException {
        PrintWriter out;
        boolean flag = false;
        if (file.getSize() > 0) {
        	request.getSession().getServletContext().getRealPath("/");
        	//路径
            String path = System.getProperty("user.dir").replace("bin", "webapps")+"\\testupload\\upload";
            //获取文件原名
			String fullName=file.getOriginalFilename();
			//获取扩展名称
			String ext=fullName.substring(fullName.lastIndexOf("."));
			//拼接文件保存的名称
			String fileName=System.nanoTime()+ext;
            try {
                FileUtils.copyInputStreamToFile(file.getInputStream(),
                        new File(path, fileName));
                flag = true;
            } catch (Exception e) {
            }
        }
        out = response.getWriter();
        if (flag == true) {
            out.print("1");
        } else {
            out.print("2");
        }
    }

上传成功后如下图所示：