闲的没事,突然想起读书的时候文件上传进度条没有实现,现在想想,那时候真是太聪明了。如今,就刚刚,蛋疼得我做了一个,正如我所想到的一样,同事们确实是一阵嘲笑,还有一个小伙子居然说:‘这种东西网上很多成熟的东西了,我们不应该拘泥于这种小技术、、、’;我晕倒了,哎,学校里没实现的东西,虽然现在看来信手拈来,但是,自己做的东西总比网上荡好,我们很多同事就是这样,网上荡。。。对此,我只能说无语。。。。
其实上传进度条很简单,最简单的就是我下面的了,当然复杂的也有,不过我没用过。我以前也是用flash的,
其实上传进度条很简单,最简单的就是我下面的了,当然复杂的也有,不过我没用过。我以前也是用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)+'%');
}
});
};