java多文件上传显示进度条

Python012

java多文件上传显示进度条,第1张

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

1、jsp 页面

<!DOCTYPE html>  

<%@ page contentType="text/htmlcharset=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>

2、java 代码

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  

    }  

      

}

1、引入bootstrap.css和jquery.js

2、点击按钮后获取文件列表，添加到FormData，调用open函数指定类型与URL地址，在发起请求send（）；

3、监听onreadystatechange事件，当服务器回应后，把传回来的数据转换成JSON字符串，修改img的URL地址，让图片文件显示在页面中；

4、创建xhr对象开启监听文件上传进度，e.lengthComputable是true则计算进度条百分比，把结果给进度条；

5、进度条完成后，修改颜色，移除类添加类

HTML

JS