前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest上传文件进度实现</title>
<script type="text/javascript">
function uploadFile(){
var ot;
var oloaded;
var fileobj1 = document.getElementById("video").files[0];
var fileobj2 = document.getElementById("pic").files[0];
var videotitle = document.getElementById("videotitle").value;
alert(videotitle);
var url = "videoUpload";
var form = new FormData();
form.append("videoname",fileobj1);
form.append("picname",fileobj2);
form.append("videotitle",videotitle);
var xhr = new XMLHttpRequest();
xhr.open("post", url, true);
xhr.upload.onprogress = progressFunction;
xhr.upload.onloadstart = function (){
ot = new Date().getTime();
oloaded = 0;
};
xhr.send(form);
}
function uploadComplete(){
alert("上传成功");
}
function uploadError(){
alert("上传失败");
}
function progressFunction(event){
var progressBar = document.getElementById("progressBar");
if(event.lengthComputable){
progressBar.max = event.total;
progressBar.value = event.loaded;
if(progressBar.max == progressBar.value){
alert("上传完成!")
}
}
}
</script>
</head>
<body>
<div id="formwrapper">
<h3>上传视频</h3>
<form action="#" method="post" enctype="multipart/form-data">
<fieldset>
<legend>视频的基本信息</legend>
<div>
<label for="title">视频标题</label> <input type="text" name="videotitle"
id="videotitle" value="" size="60" maxlength="200" /> *(最多200个字符)<br />
</div>
<div>
<label for="source">选择视频文件(仅限MP4格式)</label> <input type="file"
name="videoname" id="video" onchange="verificationVideoFile(this)"> <br />
</div>
<div>
<label for="source">选择视频封面</label> <input type="file"
name="picname" id="pic" onchange="verificationPicFile(this)"> <br />
</div>
<progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
<div class="enter">
<input type="button" onclick="uploadFile()" value="上传">
<input name="reset" type="reset" class="buttom" value="重置" />
<input name="return" type="button" class="buttom" value="返回列表页面"
onclick="window.location = 'SearchArticlesServlet'" />
</div>
</fieldset>
</form>
</div>
</body>
</html>
后端代码
```java
@RequestMapping(value="/videoUpload", method = RequestMethod.POST)
public String videoUpload(@RequestParam("videotitle")String videotitle
,@RequestParam(value = "videoname", required = false) MultipartFile videoname,
@RequestParam(value = "picname", required = false) MultipartFile picname
,HttpServletRequest request, HttpServletResponse response) throws Exception {
if (videoname == null||picname==null) return "addVideo.jsp";
String videoName = videoname.getOriginalFilename();
String picName = picname.getOriginalFilename();
System.out.println(videoName);
String path = "E:\\file";
Date date = new Date();
SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");
String time = formatter.format(date);
String newPath = path+"\\"+time;
File newfile = new File(newPath);
System.out.println(newPath);
newfile.mkdir();
FileOutputStream fosVideo = FileUtils.openOutputStream(new File(newPath+"\\" +videoName));
IOUtils.copy(videoname.getInputStream(),fosVideo);
fosVideo.close();
FileOutputStream fosPic = FileUtils.openOutputStream(new File(newPath+"\\" +picName));
IOUtils.copy(picname.getInputStream(),fosPic);
fosPic.close();
Video newVideo = new Video();
newVideo.setPicpath("E:/file"+"/"+time+"/" +picName);
newVideo.setVideopath("E:/file"+"/"+time+"/" +videoName);
newVideo.setVideoname(videotitle);
this.videoService.save(newVideo);
return "video/video_add_success.jsp";
}