效果图：
FileUploadController.java
-
import java.io.File;
-
import java.util.List;
-
-
import javax.servlet.http.HttpServletRequest;
-
import javax.servlet.http.HttpServletResponse;
-
import javax.servlet.http.HttpSession;
-
-
-
-
-
import org.apache.commons.fileupload.FileItem;
-
import org.apache.commons.fileupload.FileItemFactory;
-
import org.apache.commons.fileupload.ProgressListener;
-
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
-
import org.apache.commons.fileupload.servlet.ServletFileUpload;
-
import org.apache.log4j.Logger;
-
import org.springframework.stereotype.Controller;
-
import org.springframework.web.bind.annotation.RequestMapping;
-
import org.springframework.web.bind.annotation.RequestMethod;
-
import org.springframework.web.bind.annotation.ResponseBody;
-
import org.springframework.web.servlet.ModelAndView;
-
-
@Controller
-
public
class FileUploadController {
-
Logger log = Logger.getLogger(FileUploadController.class);
-
-
@RequestMapping(value =
"/touploadfile", method = RequestMethod.GET)
-
public ModelAndView toUpload(HttpServletRequest request,
-
HttpServletResponse response)
throws Exception{
-
return
new ModelAndView(
"upload2");
-
-
}
-
/**
-
* upload 上传文件
-
* @param request
-
* @param response
-
* @return
-
* @throws Exception
-
*/
-
@RequestMapping(value =
"/uploadfile2", method = RequestMethod.POST)
-
public ModelAndView upload(HttpServletRequest request,
-
HttpServletResponse response)
throws Exception {
-
final HttpSession hs = request.getSession();
-
ModelAndView mv =
new ModelAndView();
-
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
-
if(!isMultipart){
-
return mv;
-
}
-
// Create a factory for disk-based file items
-
FileItemFactory factory =
new DiskFileItemFactory();
-
-
// Create a new file upload handler
-
ServletFileUpload upload =
new ServletFileUpload(factory);
-
upload.setProgressListener(
new ProgressListener(){
-
public void update(long pBytesRead, long pContentLength, int pItems) {
-
ProcessInfo pri =
new ProcessInfo();
-
pri.itemNum = pItems;
-
pri.readSize = pBytesRead;
-
pri.totalSize = pContentLength;
-
pri.show = pBytesRead+
"/"+pContentLength+
" byte";
-
pri.rate = Math.round(
new Float(pBytesRead) /
new Float(pContentLength)*
100);
-
hs.setAttribute(
"proInfo", pri);
-
}
-
});
-
List<FileItem> items = upload.parseRequest(request);
-
String path = request.getSession().getServletContext().getRealPath(
"upload");
-
System.out.println(path);
-
for(FileItem item : items){
-
if(item.isFormField()){
-
-
}
else{
-
System.out.println(path +
"/"+ item.getFieldName());
-
File targetFile =
new File(path +
"/"+ item.getName());
-
if(!targetFile.exists()){
-
targetFile.createNewFile();
-
}
-
item.write(targetFile);
-
}
-
}
-
System.out.println(
"上传文件的个数为：" + items.size());
-
return mv;
-
}
-
-
-
/**
-
* process 获取进度
-
* @param request
-
* @param response
-
* @return
-
* @throws Exception
-
*/
-
@RequestMapping(value =
"/process", method = RequestMethod.GET)
-
@ResponseBody
-
public Object process(HttpServletRequest request,
-
HttpServletResponse response)
throws Exception {
-
return ( ProcessInfo)request.getSession().getAttribute(
"proInfo");
-
}
-
-
class ProcessInfo{
-
public
long totalSize =
1;
-
public
long readSize =
0;
-
public String show =
"";
-
public
int itemNum =
0;
-
public
int rate =
0;
-
}
-
-
}
upload.jsp
-
<!DOCTYPE html>
-
<%@ page contentType="text/html;charset=UTF-8"%>
-
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
<script src="http://code.jquery.com/jquery.js" type="text/javascript">
</script>
-
<link href="http://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
-
<link href="http://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet">
-
</head>
-
<body>
-
<form id='fForm' class="form-actions form-horizontal" action="uploadfile2"
-
encType=
"multipart/form-data"
target=
"uploadf"
method=
"post">
-
<div class="control-group">
-
<label class="control-label">上传文件:
</label>
-
<div class="controls">
-
<input type="file" id="file" name="file" style="width:550">
-
-
</div>
-
<div class="controls">
-
<input type="file" name="file" style="width:550">
-
</div>
-
<div class="controls">
-
<input type="file" name="file" style="width:550">
-
</div>
-
<label class="control-label">上传进度:
</label>
-
<div class="controls">
-
<div class="progress progress-success progress-striped" style="width:50%">
-
<div id = 'proBar' class="bar" style="width: 0%">
</div>
-
</div>
-
</div>
-
</div>
-
-
<div class="control-group">
-
<div class="controls">
-
<button type="button" id="subbut" class="btn">submit
</button>
-
</div>
-
</div>
-
</form>
-
<iframe name="uploadf" style="display:none">
</iframe>
-
</body>
-
</html>
-
<script type="text/javascript">
-
-
$(
document).ready(
function() {
-
$(
'#subbut').bind(
'click',
function() {
-
$(
'#fForm').submit();
-
var eventFun =
function() {
-
$.ajax({
-
type :
'GET',
-
url :
'process',
-
data : {},
-
dataType :
'json',
-
success :
function(data) {
-
$(
'#proBar').css
-
-
(
'width', data.rate +
'' +
'%');
-
$(
'#proBar').empty();
-
$(
'#proBar').append(data.show);
-
if (data.rate ==
100) {
-
window.clearInterval(intId);
-
}
-
}
-
});
-
};
-
var intId =
window.setInterval(eventFun,
500);
-
});
-
});
-
</script>
表单提交后页面不跳转，不刷新，留在原页面：
-
<div
class=
"panel-body">
-
<form id ="firstUpdateForm" action="/demo/upload/firstUpload" method="post"
-
enctype=
"multipart/form-data"
class=
"form-horizontal"
role=
"form"
target=
"hidden_frame">
-
<div class="modal-body">
-
<div class="form-group">
-
<label class="col-sm-3 control-label">上传文件
</label>
-
<div class="col-sm-5">
-
<input type="file" id="firstDemoImgFile" name="imgFile">
-
</div>
-
</div>
-
</div>
-
<div class="modal-footer">
-
<div id="firstUploadSucceed" style="display: none;">
-
<strong>新增成功！
</strong>
<span id="firstUploadSucceedMsg">
</span>
-
</div>
-
<div id="firstUploadFailed" style="display: none;">
-
<strong>对不起！新增失败
</strong>
<span id="firstUploadFailedMsg">
</span>
-
</div>
-
<button id="createPeriadBtn" type="submit" class="btn btn-default">确定
</button>
-
</div>
-
</form>
-
<iframe name='hidden_frame' id="hidden_frame" style='display:none'>
</iframe>
-
</div>
form表单提交的target="hidden_frame"，这是为了后台处理完成后返回结果刷新name为 hidde n_frame的iframe，这样就不会刷新当前页面了。
原文地址:https://blog.csdn.net/wzygis/article/details/51364157