您的位置：首页 > 编程语言 > Java开发

SpringMVC上传文件进度显示

2016-05-10 16:18 501 查看
效果图：



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为hidden_frame的iframe，这样就不会刷新当前页面了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  springmvc 文件上传进度
相关文章推荐
新的分享
章节导航