前台表单:
1 <form id="uploadform" method="post" enctype="multipart/form-data"> 2 上传视频:<input type="file" id="file" name="file" onchange="uploadfile()"/> 3 进度: 4 <progress id="progressBar" value="0" max="100"></progress> 5 <span id="percentage"></span> 6 </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); }