SpringMVC上传文件进度显示

来源：互联网发布：新浪微博粉丝数据分析编辑：程序博客网时间：2024/05/21 23:33

效果图：

FileUploadController.Java

[java] view plain copy
 
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

[html] view plain copy
 
<!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>  

表单提交后页面不跳转，不刷新，留在原页面：

[javascript] view plain copy
 
<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，这样就不会刷新当前页面了。

0 0