java文件上传带进度条的（技术有点老，可以做参考）

效果图

 

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;
	}
	
}

 

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>

 

posted @ 2022-05-17 17:00  xiexie0812  阅读(400)  评论(0)  编辑  收藏  举报