当前位置: 代码迷 >> JavaScript >> 文件下传进度条-servlet+js
  详细解决方案

文件下传进度条-servlet+js

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



其实上传进度条很简单,最简单的就是我下面的了,当然复杂的也有,不过我没用过。我以前也是用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)+'%');
		}
	});
};

  相关解决方案