SpringMVC上传文件进度显示

最新推荐文章于 2023-03-30 23:14:20 发布

0X码上链

最新推荐文章于 2023-03-30 23:14:20 发布

阅读量4.1k

点赞数

分类专栏： s2s3h4(s2sh) 文章标签： springmvc 文件上传进度

本文链接：https://blog.csdn.net/wzygis/article/details/51364157

版权

s2s3h4(s2sh) 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

效果图：

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，这样就不会刷新当前页面了。

0X码上链

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
SpringMVC上传文件进度显示

效果图：FileUploadController.javaimport java.io.File;import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.se
复制链接

扫一扫