文件上传进度条-----servlet+js

爪哇岛岛主

浏览: 37879 次
性别:
来自: 杭州(也就是天堂)

最近访客更多访客>>

yangmeiquan

ymgjava

yusl113

wsk179

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

闲的没事，突然想起读书的时候文件上传进度条没有实现，现在想想，那时候真是太聪明了。如今，就刚刚，蛋疼得我做了一个，正如我所想到的一样，同事们确实是一阵嘲笑，还有一个小伙子居然说：‘这种东西网上很多成熟的东西了，我们不应该拘泥于这种小技术、、、’；我晕倒了，哎，学校里没实现的东西，虽然现在看来信手拈来，但是，自己做的东西总比网上荡好，我们很多同事就是这样，网上荡。。。对此，我只能说无语。。。。

其实上传进度条很简单，最简单的就是我下面的了，当然复杂的也有，不过我没用过。我以前也是用flash的，

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文件上传进度条实例</title>
<link style="text/css" rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="script/upload.js"></script>
</head>
<body>

	<fieldset>
		<legend>文件上传实例</legend>
		<form id="form" action="file.upload" method="post" enctype="multipart/form-data" target="frm">
			请选择上传的文件：<input type="file" name="uploadFile" />
		</form>
		<button id="btn">上传</button>
	</fieldset>
	
	<fieldset>
		<legend>进度显示</legend>
		<div id="process"><div id="data"></div></div>
	</fieldset>
	<iframe id="frm" name="frm" style="display:none;"></iframe>
</body>
</html>

package servlet;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.commons.fileupload.DefaultFileItemFactory;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.servlet.ServletFileUpload;



@SuppressWarnings("deprecation")
public class UpLoad extends HttpServlet {
	private static final long serialVersionUID = 1L;
 
	@SuppressWarnings("rawtypes")
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		DefaultFileItemFactory factory = new DefaultFileItemFactory();
		HttpSession session = request.getSession();
		ServletFileUpload upload = new ServletFileUpload(factory);
		try{
			List tempList = upload.parseRequest(request);
			Iterator it = tempList.iterator();
			while(it.hasNext()){
				FileItem item = (FileItem)it.next();
				if(item.isFormField()){
					/**处理常规文本域**/
				}else{
					if(item.getName()!=null&&!item.getName().equals("")){
						Long size = item.getSize();
						System.out.println(size);
						File tempFile = new File("F:/"+item.getName());
						byte[] b = new byte[100];
						
						InputStream in = item.getInputStream();
						OutputStream out =new FileOutputStream(tempFile);
						int len = 0;
						int current = 0;
						session.setAttribute("total", size);
						while((len=in.read(b))>0){
							current += len;
							
							Thread.sleep(10);//故意延迟，以便看出效果
							session.setAttribute("current", current);
							out.write(b,0,len);
						}
					}
				}
			}
		}catch(Exception e){
			e.printStackTrace();
		}
	}

}

var total = 0;//文件总大小
var current = 0;//当前大小
var present= 0;//百分比
var timer = null;//定时触发事件
(function($){
	$(function(){
		$('#btn').click(function(){
		    timer = window.setInterval('getData()', 500);
		    $('#btn').attr('disabled','disabled');
			$('#form').submit();
		});
	});
})(jQuery);
var getData = function(){
	$.ajax({
		url:'file.data',
		success:function(msg){
			msg = eval('(' + msg + ')');
			total = msg.total;
			current = msg.current;
			if(present==100){
				$('#btn').attr('disabled','');
				window.clearInterval(timer);
			}
			present= (current/total)*100;
			$('#data').attr('innerHTML',present.toFixed(2)+'%');
		}
	});
};