前端代码
< ! 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" ;
}