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);
    }