Coin163

首页 > java文件上传带进度条的

java文件上传带进度条的

相关标签: java

2021腾讯云限时秒杀,爆款1核2G云服务器298元/3年!(领取2860元代金券),
地址https://cloud.tencent.com/act/cps/redirect?redirect=1062

2021阿里云最低价产品入口+领取代金券(老用户3折起),
入口地址https://www.aliyun.com/minisite/goods

相关推荐:springMVC文件上传带进度条前端使用html5+bootstarp

项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用html5;截图前段模块是bootstarp框架;不废话直接来代码;spring-mvc配置文件; 效果截图如下: 详细解释如下: </pre><pre code_snippet_id="618230" snippet_file_name="blog_2015

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

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

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

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

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

相关推荐:WinFrom通过WebClient上传下载文件(带进度条)

以下程序在.NET2005,系统XP中测试通过: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows.Forms; using System.Net; using System.IO;   namespace TQSystem.Com {     class UpDownLoadFile

                      commons-io-2.4.jar




1.jsp 页面

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <%@ page contentType="text/html;charset=UTF-8"%>    
  3. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  7. <script src="../js/jquery-1.6.4.js" type="text/javascript"></script>  
  8. <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>  
  9. </head>  
  10. <body>  
  11.         <form id='fForm' class="form-actions form-horizontal" action="../upload.html"   
  12.               encType="multipart/form-data" target="uploadf" method="post">  
  13.                  <div class="control-group">  
  14.                     <label class="control-label">上传文件:</label>  
  15.                     <div class="controls">  
  16.                         <input type="file"  name="file" style="width:550">  
  17.                               
  18.                     </div>  
  19.                     <div class="controls">  
  20.                         <input type="file"  name="file" style="width:550">  
  21.                     </div>  
  22.                     <div class="controls">  
  23.                         <input type="file"  name="file" style="width:550">  
  24.                     </div>  
  25.                     <label class="control-label">上传进度:</label>  
  26.                     <div class="controls">  
  27.                         <div  class="progress progress-success progress-striped" style="width:50%">  
  28.                             <div  id = 'proBar' class="bar" style="width: 0%"></div>  
  29.                         </div>  
  30.                     </div>  
  31.                 </div>  
  32.                   
  33.                  <div class="control-group">  
  34.                     <div class="controls">  
  35.                     <button type="button" id="subbut" class="btn">submit</button>  
  36.                     </div>  
  37.                 </div>  
  38.         </form>  
  39.         <iframe name="uploadf" style="display:none"></iframe>  
  40. </body>  
  41. </html>  
  42. <script >  
  43. $(document).ready(function(){  
  44.     $('#subbut').bind('click',  
  45.             function(){  
  46.                 $('#fForm').submit();  
  47.                 var eventFun = function(){  
  48.                     $.ajax({  
  49.                         type: 'GET',  
  50.                         url: '../process.json',  
  51.                         data: {},  
  52.                         dataType: 'json',  
  53.                         success : function(data){  
  54.                                 $('#proBar').css('width',data.rate+''+'%');  
  55.                                 $('#proBar').empty();  
  56.                                 $('#proBar').append(data.show);   
  57.                                 if(data.rate == 100){  
  58.                                     window.clearInterval(intId);  
  59.                                 }     
  60.                 }});};  
  61.                 var intId = window.setInterval(eventFun,500);  
  62.     });  
  63. });  
  64. </script>  
2.java 代码 [java] view plain copy
  1. package com.controller;  
  2.   
  3. import java.util.List;  
  4.   
  5. import javax.servlet.http.HttpServletRequest;  
  6. import javax.servlet.http.HttpServletResponse;  
  7. import javax.servlet.http.HttpSession;  
  8.   
  9. import org.apache.commons.fileupload.FileItemFactory;  
  10. import org.apache.commons.fileupload.ProgressListener;  
  11. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
  12. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
  13. import org.apache.log4j.Logger;  
  14. import org.springframework.stereotype.Controller;  
  15. import org.springframework.web.bind.annotation.RequestMapping;  
  16. import org.springframework.web.bind.annotation.RequestMethod;  
  17. import org.springframework.web.bind.annotation.ResponseBody;  
  18. import org.springframework.web.servlet.ModelAndView;  
  19.   
  20. @Controller  
  21. public class FileUploadController {  
  22.     Logger log = Logger.getLogger(FileUploadController.class);  
  23.       
  24.     /** 
  25.      * upload  上传文件 
  26.      * @param request 
  27.      * @param response 
  28.      * @return 
  29.      * @throws Exception 
  30.      */  
  31.     @RequestMapping(value = "/upload.html", method = RequestMethod.POST)  
  32.     public ModelAndView upload(HttpServletRequest request,  
  33.             HttpServletResponse response) throws Exception {  
  34.         final HttpSession hs = request.getSession();  
  35.         ModelAndView mv = new ModelAndView();  
  36.         boolean isMultipart = ServletFileUpload.isMultipartContent(request);  
  37.         if(!isMultipart){  
  38.             return mv;  
  39.         }  
  40.         // Create a factory for disk-based file items  
  41.         FileItemFactory factory = new DiskFileItemFactory();  
  42.   
  43.         // Create a new file upload handler  
  44.         ServletFileUpload upload = new ServletFileUpload(factory);  
  45.         upload.setProgressListener(new ProgressListener(){  
  46.                public void update(long pBytesRead, long pContentLength, int pItems) {  
  47.                    ProcessInfo pri = new ProcessInfo();  
  48.                    pri.itemNum = pItems;  
  49.                    pri.readSize = pBytesRead;  
  50.                    pri.totalSize = pContentLength;  
  51.                    pri.show = pBytesRead+"/"+pContentLength+" byte";  
  52.                    pri.rate = Math.round(new Float(pBytesRead) / new Float(pContentLength)*100);  
  53.                    hs.setAttribute("proInfo", pri);  
  54.                }  
  55.             });  
  56.         List items = upload.parseRequest(request);  
  57.         // Parse the request  
  58.         // Process the uploaded items  
  59. //      Iterator iter = items.iterator();  
  60. //      while (iter.hasNext()) {  
  61. //          FileItem item = (FileItem) iter.next();  
  62. //          if (item.isFormField()) {  
  63. //              String name = item.getFieldName();  
  64. //              String value = item.getString();  
  65. //              System.out.println("this is common feild!"+name+"="+value);  
  66. //          } else {  
  67. //              System.out.println("this is file feild!");  
  68. //               String fieldName = item.getFieldName();  
  69. //                  String fileName = item.getName();  
  70. //                  String contentType = item.getContentType();  
  71. //                  boolean isInMemory = item.isInMemory();  
  72. //                  long sizeInBytes = item.getSize();  
  73. //                  File uploadedFile = new File("c://"+fileName);  
  74. //                  item.write(uploadedFile);  
  75. //          }  
  76. //      }  
  77.         return mv;  
  78.     }  
  79.       
  80.       
  81.     /** 
  82.      * process 获取进度 
  83.      * @param request 
  84.      * @param response 
  85.      * @return 
  86.      * @throws Exception 
  87.      */  
  88.     @RequestMapping(value = "/process.json", method = RequestMethod.GET)  
  89.     @ResponseBody  
  90.     public Object process(HttpServletRequest request,  
  91.             HttpServletResponse response) throws Exception {  
  92.         return ( ProcessInfo)request.getSession().getAttribute("proInfo");  
  93.     }  
  94.       
  95.     class ProcessInfo{  
  96.         public long totalSize = 1;  
  97.         public long readSize = 0;  
  98.         public String show = "";  
  99.         public int itemNum = 0;  
  100.         public int rate = 0;  
  101.     }  
  102.       

原文

     本文将使用   apache fileupload   ,spring MVC   jquery1.6x , bootstrap  实现一个带进度条的多文件上传, 由于fileupload 的局限,暂不能实现每个上传文件都显示进度条,只能实现一个总

------分隔线----------------------------