本文将使用 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 页面
- <!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="../js/jquery-1.6.4.js" type="text/javascript"></script>
- <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
- </head>
- <body>
- <form id='fForm' class="form-actions form-horizontal" action="../upload.html"
- encType="multipart/form-data" target="uploadf" method="post">
- <div class="control-group">
- <label class="control-label">上传文件:</label>
- <div class="controls">
- <input type="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 >
- $(document).ready(function(){
- $('#subbut').bind('click',
- function(){
- $('#fForm').submit();
- var eventFun = function(){
- $.ajax({
- type: 'GET',
- url: '../process.json',
- 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>
- package com.controller;
- import java.util.List;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- import javax.servlet.http.HttpSession;
- 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);
- /**
- * upload 上传文件
- * @param request
- * @param response
- * @return
- * @throws Exception
- */
- @RequestMapping(value = "/upload.html", 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 items = upload.parseRequest(request);
- // Parse the request
- // Process the uploaded items
- // Iterator iter = items.iterator();
- // while (iter.hasNext()) {
- // FileItem item = (FileItem) iter.next();
- // if (item.isFormField()) {
- // String name = item.getFieldName();
- // String value = item.getString();
- // System.out.println("this is common feild!"+name+"="+value);
- // } else {
- // System.out.println("this is file feild!");
- // String fieldName = item.getFieldName();
- // String fileName = item.getName();
- // String contentType = item.getContentType();
- // boolean isInMemory = item.isInMemory();
- // long sizeInBytes = item.getSize();
- // File uploadedFile = new File("c://"+fileName);
- // item.write(uploadedFile);
- // }
- // }
- return mv;
- }
- /**
- * process 获取进度
- * @param request
- * @param response
- * @return
- * @throws Exception
- */
- @RequestMapping(value = "/process.json", 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;
- }
- }