java文件上传带进度条的

最新推荐文章于 2024-04-29 14:59:44 发布

高成浩

最新推荐文章于 2024-04-29 14:59:44 发布

阅读量1.8w

点赞数 5

本文链接：https://blog.csdn.net/gaochh01/article/details/8729845

版权

本文将使用 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>

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

高成浩

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
6
评论
java文件上传带进度条的

本文将使用 apache fileupload ,spring MVC jquery1.6x , bootstrap 实现一个带进度条的多文件上传，由于fileupload 的局限，暂不能实现每个上传文件都显示进度条，只能实现一个总的进度条，效果如图，此文我们假定你了解SPRING MVC ，jquery bootstrap 可以到此下载：http://www
复制链接

扫一扫