zoukankan      html  css  js  c++  java

  • springMVC 整合进度条

    springMVC 整合进度条

    https://blog.csdn.net/javaer_lee/article/details/52514480

    最终效果：

    本文将使用   apache fileupload   ,spring MVC   jquery1.6x , bootstrap  实现一个带进度条的多文件上传，

    由于fileupload 的局限，暂不能实现每个上传文件都显示进度条，只能实现一个总的进度条，效果如图，

    此文我们假定你了解SPRING MVC   ，jquery   

    bootstrap 可以到此下载：http://www.bootcss.com/

    两个JAR包 ：commons-fileupload-1.2.jar

                          commons-io-2.4.jar

    1.jsp 页面

    1.  
      1. <!DOCTYPE html>
    2.  
      2. <%@ page contentType="text/html;charset=UTF-8"%>
    3.  
      3. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    4.  
      4. <html xmlns="http://www.w3.org/1999/xhtml">
    5.  
      5. <head>
    6.  
      6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    7.  
      7. <script src="../js/jquery-1.6.4.js" type="text/javascript"></script>
    8.  
      8. <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
    9.  
      9. </head>
    10.  
      10. <body>
    11.  
      11. <form id='fForm' class="form-actions form-horizontal" action="../upload.html"
    12.  
      12. encType="multipart/form-data" target="uploadf" method="post">
    13.  
      13. <div class="control-group">
    14.  
      14. <label class="control-label">上传文件:</label>
    15.  
      15. <div class="controls">
    16.  
      16. <input type="file" name="file" style="550">
    17.  
      17.
    18.  
      18. </div>
    19.  
      19. <div class="controls">
    20.  
      20. <input type="file" name="file" style="550">
    21.  
      21. </div>
    22.  
      22. <div class="controls">
    23.  
      23. <input type="file" name="file" style="550">
    24.  
      24. </div>
    25.  
      25. <label class="control-label">上传进度:</label>
    26.  
      26. <div class="controls">
    27.  
      27. <div class="progress progress-success progress-striped" style="50%">
    28.  
      28. <div id = 'proBar' class="bar" style=" 0%"></div>
    29.  
      29. </div>
    30.  
      30. </div>
    31.  
      31. </div>
    32.  
      32.
    33.  
      33. <div class="control-group">
    34.  
      34. <div class="controls">
    35.  
      35. <button type="button" id="subbut" class="btn">submit</button>
    36.  
      36. </div>
    37.  
      37. </div>
    38.  
      38. </form>
    39.  
      39. <iframe name="uploadf" style="display:none"></iframe>
    40.  
      40. </body>
    41.  
      41. </html>
    42.  
      42. <script >
    43.  
      43. $(document).ready(function(){
    44.  
      44. $('#subbut').bind('click',
    45.  
      45. function(){
    46.  
      46. $('#fForm').submit();
    47.  
      47. var eventFun = function(){
    48.  
      48. $.ajax({
    49.  
      49. type: 'GET',
    50.  
      50. url: '../process.json',
    51.  
      51. data: {},
    52.  
      52. dataType: 'json',
    53.  
      53. success : function(data){
    54.  
      54. $('#proBar').css('width',data.rate+''+'%');
    55.  
      55. $('#proBar').empty();
    56.  
      56. $('#proBar').append(data.show);
    57.  
      57. if(data.rate == 100){
    58.  
      58. window.clearInterval(intId);
    59.  
      59. }
    60.  
      60. }});};
    61.  
      61. var intId = window.setInterval(eventFun,500);
    62.  
      62. });
    63.  
      63. });
    64.  
      64. </script>

      2.java 代码
    1.  
      import java.util.List;
    2.  
      import javax.servlet.http.HttpServletRequest;
    3.  
      import javax.servlet.http.HttpServletResponse;
    4.  
      import javax.servlet.http.HttpSession;
    5.  
      import org.apache.commons.fileupload.FileItemFactory;
    6.  
      import org.apache.commons.fileupload.ProgressListener;
    7.  
      import org.apache.commons.fileupload.disk.DiskFileItemFactory;
    8.  
      import org.apache.commons.fileupload.servlet.ServletFileUpload;
    9.  
      import org.apache.log4j.Logger;
    10.  
      import org.springframework.stereotype.Controller;
    11.  
      import org.springframework.web.bind.annotation.RequestMapping;
    12.  
      import org.springframework.web.bind.annotation.RequestMethod;
    13.  
      import org.springframework.web.bind.annotation.ResponseBody;
    14.  
      import org.springframework.web.servlet.ModelAndView;
    15.  
       
    16.  
      @Controller
    17.  
      public class FileUploadController {
    18.  
      Logger log = Logger.getLogger(FileUploadController.class);
    19.  
       
    20.  
      /**
    21.  
      * upload 上传文件
    22.  
      * @param request
    23.  
      * @param response
    24.  
      * @return
    25.  
      * @throws Exception
    26.  
      */
    27.  
      @RequestMapping(value = "/upload.html", method = RequestMethod.POST)
    28.  
      public ModelAndView upload(HttpServletRequest request,
    29.  
      HttpServletResponse response) throws Exception {
    30.  
      final HttpSession hs = request.getSession();
    31.  
      ModelAndView mv = new ModelAndView();
    32.  
      boolean isMultipart = ServletFileUpload.isMultipartContent(request);
    33.  
      if(!isMultipart){
    34.  
      return mv;
    35.  
      }
    36.  
      // Create a factory for disk-based file items
    37.  
      FileItemFactory factory = new DiskFileItemFactory();
    38.  
       
    39.  
      // Create a new file upload handler
    40.  
      ServletFileUpload upload = new ServletFileUpload(factory);
    41.  
      upload.setProgressListener(new ProgressListener(){
    42.  
      public void update(long pBytesRead, long pContentLength, int pItems) {
    43.  
      ProcessInfo pri = new ProcessInfo();
    44.  
      pri.itemNum = pItems;
    45.  
      pri.readSize = pBytesRead;
    46.  
      pri.totalSize = pContentLength;
    47.  
      pri.show = pBytesRead+"/"+pContentLength+" byte";
    48.  
      pri.rate = Math.round(new Float(pBytesRead) / new Float(pContentLength)*100);
    49.  
      hs.setAttribute("proInfo", pri);
    50.  
      }
    51.  
      });
    52.  
      List items = upload.parseRequest(request);
    53.  
      // Parse the request
    54.  
      // Process the uploaded items
    55.  
      // Iterator iter = items.iterator();
    56.  
      // while (iter.hasNext()) {
    57.  
      // FileItem item = (FileItem) iter.next();
    58.  
      // if (item.isFormField()) {
    59.  
      // String name = item.getFieldName();
    60.  
      // String value = item.getString();
    61.  
      // System.out.println("this is common feild!"+name+"="+value);
    62.  
      // } else {
    63.  
      // System.out.println("this is file feild!");
    64.  
      // String fieldName = item.getFieldName();
    65.  
      // String fileName = item.getName();
    66.  
      // String contentType = item.getContentType();
    67.  
      // boolean isInMemory = item.isInMemory();
    68.  
      // long sizeInBytes = item.getSize();
    69.  
      // File uploadedFile = new File("c://"+fileName);
    70.  
      // item.write(uploadedFile);
    71.  
      // }
    72.  
      // }
    73.  
      return mv;
    74.  
      }
    75.  
       
    76.  
       
    77.  
      /**
    78.  
      * process 获取进度
    79.  
      * @param request
    80.  
      * @param response
    81.  
      * @return
    82.  
      * @throws Exception
    83.  
      */
    84.  
      @RequestMapping(value = "/process.json", method = RequestMethod.GET)
    85.  
      @ResponseBody
    86.  
      public Object process(HttpServletRequest request,
    87.  
      HttpServletResponse response) throws Exception {
    88.  
      return ( ProcessInfo)request.getSession().getAttribute("proInfo");
    89.  
      }
    90.  
       
    91.  
      class ProcessInfo{
    92.  
      public long totalSize = 1;
    93.  
      public long readSize = 0;
    94.  
      public String show = "";
    95.  
      public int itemNum = 0;
    96.  
      public int rate = 0;
    97.  
      }
    98.  
       
    99.  
      }


    但是，如果你的配置文件中有如下配置的话，以上方法就行不通了：

    1.  
      <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    2.  
      <property name="defaultEncoding" value="UTF-8" />
    3.  
      <property name="maxUploadSize" value="2000000000" />
    4.  
      </bean>



    因为这个配置会让你的SpringMVC中servletFileUpload解析为空！

    解决办法就是重写CommonsMultipartResolver的parseRequest方法

    1、首先将以上的bean注释掉，并加上下面的代码：

    1.  
      <bean id="multipartResolver" class=".../CommonsMultipartResolverExt"> //class为CommonsMultipartResolverExt类的路径
    2.  
      <property name="defaultEncoding" value="UTF-8" />
    3.  
      <property name="maxUploadSize" value="2000000000000" /> //上传文件大小限制
    4.  
      </bean>



    2、重写CommonsMultipartResolver的parseRequest方法

    1.  
      import java.util.List;
    2.  
      import javax.servlet.http.HttpServletRequest;
    3.  
      import javax.servlet.http.HttpSession;
    4.  
      import com.smax.ppd.util.FileUploadListener;
    5.  
      import org.apache.commons.fileupload.FileItem;
    6.  
      import org.apache.commons.fileupload.FileUpload;
    7.  
      import org.apache.commons.fileupload.FileUploadBase;
    8.  
      import org.apache.commons.fileupload.FileUploadException;
    9.  
      import org.apache.commons.fileupload.servlet.ServletFileUpload;
    10.  
      import org.springframework.web.multipart.MaxUploadSizeExceededException;
    11.  
      import org.springframework.web.multipart.MultipartException;
    12.  
      import org.springframework.web.multipart.commons.CommonsMultipartResolver;
    13.  
       
    14.  
      public class CommonsMultipartResolverExt extends CommonsMultipartResolver {
    15.  
      @Override
    16.  
      protected MultipartParsingResult parseRequest(HttpServletRequest request)
    17.  
      throws MultipartException {
    18.  
      final HttpSession hs = request.getSession();
    19.  
      FileUploadListener listener = new FileUploadListener(hs); //利用构造方法传递参数
    20.  
      String encoding = determineEncoding(request);
    21.  
      FileUpload fileUpload = prepareFileUpload(encoding);
    22.  
      fileUpload.setProgressListener(listener);
    23.  
      try {
    24.  
      List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);
    25.  
      return parseFileItems(fileItems, encoding);
    26.  
      }
    27.  
      catch (FileUploadBase.SizeLimitExceededException ex) {
    28.  
      throw new MaxUploadSizeExceededException(fileUpload.getSizeMax(), ex);
    29.  
      }
    30.  
      catch (FileUploadException ex) {
    31.  
      throw new MultipartException("Could not parse multipart servlet request", ex);
    32.  
      }
    33.  
      }
    34.  
      }

    3、在上传的Controller代码中加上以下两行代码：

    1.  
      CommonsMultipartResolverExt commonsMultipartResolverExt = new CommonsMultipartResolverExt();
    2.  
      commonsMultipartResolverExt.parseRequest(request);


    至此，就可以替代之前用bean配置所实现的功能

    4、写一个监听类实现ProgressListener

    1.  
      import org.apache.commons.fileupload.ProgressListener;
    2.  
      import javax.servlet.http.HttpSession;
    3.  
       
    4.  
      public class FileUploadListener implements ProgressListener {
    5.  
       
    6.  
      final HttpSession hs;
    7.  
       
    8.  
      public FileUploadListener(HttpSession hs) {
    9.  
      this.hs = hs;
    10.  
      }
    11.  
       
    12.  
      @Override
    13.  
      public void update(long pBytesRead, long pContentLength, int pItems) {
    14.  
      //pBytesRead 已经上传多少字节
    15.  
      //pContentLength 一共多少字节
    16.  
      //pItems 正在上传第几个文件
    17.  
      ProcessInfo pri = new ProcessInfo();
    18.  
      pri.itemNum = pItems;
    19.  
      pri.readSize = pBytesRead;
    20.  
      pri.totalSize = pContentLength;
    21.  
      pri.show = Math.round(new Float(pBytesRead) / new Float(pContentLength)*100)+" %";
    22.  
      pri.rate = Math.round(new Float(pBytesRead) / new Float(pContentLength)*100);
    23.  
      hs.setAttribute("proInfo", pri);
    24.  
      }
    25.  
       
    26.  
      public class ProcessInfo{
    27.  
      public long totalSize = 1;
    28.  
      public long readSize = 0;
    29.  
      public String show = "";
    30.  
      public int itemNum = 0;
    31.  
      public int rate = 0;
    32.  
      }
    33.  
       
    34.  
      }

    5、在Controller中写一个获取进度的方法

    1.  
      /**
    2.  
      * process 获取进度
    3.  
      * @param request
    4.  
      * @param response
    5.  
      * @return
    6.  
      * @throws Exception
    7.  
      */
    8.  
      @RequestMapping(value = "assetinfo/process", method = RequestMethod.GET)
    9.  
      @ResponseBody
    10.  
      public Map<String,Object> process(HttpServletRequest request,
    11.  
      HttpServletResponse response) throws Exception {
    12.  
       
    13.  
      Map<String,Object> map = new HashMap<>();
    14.  
       
    15.  
       
    16.  
      FileUploadListener.ProcessInfo processInfo = (FileUploadListener.ProcessInfo)request.getSession().getAttribute("proInfo");
    17.  
      map.put("show", processInfo.show);
    18.  
      map.put("rate", processInfo.rate);
    19.  
       
    20.  
      return map;
    21.  
      }

    6、在前端页面按下上传按钮后用js进行处理，代码如下：

    1.  
      $('#saverecord').bind('click',
    2.  
      function(){
    3.  
      $('#addForm').submit(); //如果前端页面的按钮type为submit则此句可以不写
    4.  
      var eventFun = function(){
    5.  
      $.ajax({
    6.  
      type: 'GET',
    7.  
      url: 'assetinfo/process',
    8.  
      data: {},
    9.  
      dataType: 'json',
    10.  
      success : function(data){
    11.  
      $('#proBar').css('width',data.rate+''+'%');
    12.  
      $('#proBar').empty();
    13.  
      $('#proBar').append(data.show);
    14.  
      if(data.rate == 100){
    15.  
      window.clearInterval(intId); // 当文件上传为100%时终止
    16.  
      }
    17.  
      }});};
    18.  
      var intId = window.setInterval(eventFun,1);//不停地调用eventFun方法与后端交互获取进度
    19.  
      });


    7、最后是前端jsp页面：

    1.  
      <label class="control-label">上传进度:</label>
    2.  
      <div class="controls">
    3.  
      <div class="progress progress-success progress-striped" style="100%">
    4.  
      <div id = 'proBar' class="bar" style=" 0%"></div>
    5.  
      </div>
    6.  
      </div>



    至此，SpringMVC框架整合进度条就全部完成。
  • 相关阅读:
    C# 微信 生活助手 空气质量 天气预报等 效果展示 数据抓取 （二）
    2014年个人总结
    是去是留？这是个问题
    电信限制ip的解决方案
    机械学习
    mac-mysql
    如何使用代码生成工具
    如何使用自定义表单和自定义流程
    test
    编程小问题001
  • 原文地址：https://www.cnblogs.com/handsome1013/p/9367290.html
Copyright © 2011-2022 走看看