springmvc实现视频上传+进度条

前台表单：

<form id="uploadform" method="post" enctype="multipart/form-data">
上传视频：<input type="file" id="file" name="file" onchange="uploadfile()"/>
                   进度：
　　　　　<progress id="progressBar" value="0" max="100"></progress>
    　　　  <span id="percentage"></span>
</form>

 

js代码：

<script type="text/javascript">

function uploadfile() {
    var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
    var FileController = "teacher/uploadvideo.action";    // 接收上传文件的后台地址 

    // FormData 对象
    var form = new FormData($( "#uploadform" )[0]);

    // XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();
    xhr.open("post", FileController, true);
    xhr.onload = function () {
       // alert("上传完成!");
    };

    xhr.upload.addEventListener("progress", progressFunction, false);
    xhr.send(form);
}

function progressFunction(evt) {
    var progressBar = document.getElementById("progressBar");
    var percentageDiv = document.getElementById("percentage");
    if (evt.lengthComputable) {
        progressBar.max = evt.total;
        progressBar.value = evt.loaded;
        percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
        if(evt.loaded==evt.total){
            alert("上传完成100%");
        }
    }
}
</script>

后台（这个传的opid是教师编号，这些代码是我从自己的项目中提取出来的，但知识是一样的）：

@RequestMapping("/teacher/uploadvideo")
    public void uploadVideo(@RequestParam("file") MultipartFile uploadFile,String opid,HttpServletRequest request) throws IllegalStateException, IOException {
        System.out.println(opid);
        //获取文件初始名称
        String originalFileName = uploadFile.getOriginalFilename();
        
        Operation ope = operationService.getOpeByid(opid);
        
        String video = ope.getVideourl();
        String houzhui = originalFileName.substring(originalFileName.lastIndexOf("."));
        
        //上传文件
        String newFileName = UUID.randomUUID()+houzhui;
        File newFile = new File(videoUrl,newFileName);
        uploadFile.transferTo(newFile);
        
        //删除原有文件
        String oldVideoUrl = videoUrl + "/" + video;
        File videoFile = new File(oldVideoUrl);
        if(videoFile.exists()) {
            videoFile.delete();
        }
        
        ope.setVideourl(newFileName);
        operationService.modify(ope);
    }