js+java 带进度条的文件上传，同步+异步
同步上传：多个文件上传时，按顺序依次上传，后面的必须等待前面的上传完毕才能开始
图一所示，正在上传第一个文件?
?
图一.同步上传1
图二所示，正在上传第二个文件?
?
图二.同步上传2
异步上传：多个文件同时开始上传
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html?xmlns="http://www.w3.org/1999/xhtml"><head><meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"?/><title>一亩三分-上传</title><SCRIPT?src="/1m3f/Common_Development/Global.js"></SCRIPT><SCRIPT?src="/1m3f/Common_Development/HttpSubmit.js"></SCRIPT><SCRIPT?src="/1m3f/Common_Development/Tools.js"></SCRIPT>
<script?language="javascript">...
????var?totalByte=[0,0];var?uploadedByte=[0,0];var?halder=[];var?uploadForms=[];//var?totalBar=[];var?goBar=[];
var?rightfulExts=...{};rightfulExts.rar="";rightfulExts.jpg="";rightfulExts.exe="";rightfulExts.iso="";rightfulExts.gif="";rightfulExts.ini="";rightfulExts.rmvb="";rightfulExts.pdf="";var?formCount=-2;function?upload()...{????formCount++;????if(formCount<0||formCount>1)...{????????return?false;
????}????????var?ext=uploadForms[formCount].fileData.value.split(".").pop().toLowerCase();????if(!(ext?in?rightfulExts)&&ext!="")...{????????alert("第"+(formCount+1)+"个文件类型不匹配！");????????return?false;????}????if(ext!="")...{????????uploadForms[formCount].saveName.value=getNewId("13","fileUpload13")+"."+ext;????}????????uploadForms[formCount].curCount.value=formCount;????uploadForms[formCount].submit();????????totalByte[formCount]=0;????halder[formCount]=window.setInterval("getTotalByte("+formCount+");",1);}function?getTotalByte(c)...{????totalByte[c]=getSession("totalByte"+c);????if(totalByte[c]!=0&&totalByte[c]!=false)...{????????window.clearInterval(halder[c]);????????var?t=Math.ceil(Math.log(totalByte[c]));????????halder[c]=window.setInterval("getUploadedByte("+c+");",t*t);????}}function?getUploadedByte(c)...{????uploadedByte[c]=getSession("uploadedByte"+c);????var?percent=Math.floor((uploadedByte[c]/totalByte[c])*100);????//totalBar[c].innerHTML=percent+"%?共"+Math.floor(totalByte[c]/(1024*1024))+"M";????goBar[c].style.width=percent+"%";????if(totalByte[c]==uploadedByte[c])...{????????window.clearInterval(halder[c]);????}}function?windowOnload()...{????uploadForms=[document.forms["uploadForm0"],document.forms["uploadForm1"]];????//totalBar=[$("totalCountainer0"),$("totalCountainer1")];????goBar=[$("uploadedCountainer0"),$("uploadedCountainer1")];}function?windowInit()...{????$("upload").onclick=upload;
}</script></head><body?onload="windowInit();windowOnload();">????<iframe?onload="upload()"?src="about:blank"?name="fileUploadFrame"?style="display:none;"?>????</iframe>????<form?name="uploadForm0"?action=.upload?method="post"?enctype="multipart/form-data"?target="fileUploadFrame">????????<table>????????????<tr>????????????????<td>????????????????????文件1????????????????</td>????????????????<td>????????????????????<input?type="hidden"?name="curCount"/>????????????????????<input?type="hidden"?name="savePath"?value="images/"?/>????????????????????<input?type="hidden"?name="saveName"?/>????????????????????<input?type="hidden"?name="canOverWrite"?value="true"?/>????????????????????<input?type="file"?name="fileData"?/>????????????????</td>????????????</tr>????????</table>????</form>????<div?id="totalCountainer0"?style="width:500px;border-style:solid;border-color:#4062E8">????????<div?id="uploadedCountainer0"?style="background-image:url(/1m3f/images/downloadbar.png);width:0%;"></div>????</div>????????????<form?name="uploadForm1"?action=.upload?method="post"?enctype="multipart/form-data"?target="fileUploadFrame">????????<table>????????????<tr>????????????????<td>????????????????????文件2????????????????</td>????????????????<td>????????????????????<input?type="hidden"?name="curCount"?value="2"?/>????????????????????<input?type="hidden"?name="savePath"?value="images/"?/>????????????????????<input?type="hidden"?name="saveName"?/>????????????????????<input?type="hidden"?name="canOverWrite"?value="true"?/>????????????????????<input?type="file"?name="fileData"?/>????????????????</td>????????????</tr>????????</table>????</form>????<div?id="totalCountainer1"?style="width:500px;border-style:solid;border-color:#4062E8">????????<div?id="uploadedCountainer1"?style="background-image:url(/1m3f/images/downloadbar.png);width:0%;"></div>????</div>????<input?id="upload"?type="button"?value="上传"?/></body></html>异步上传前台代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>一亩三分-上传</title>
<SCRIPT src="/1m3f/Common_Development/Global.js"></SCRIPT>
<SCRIPT src="/1m3f/Common_Development/HttpSubmit.js"></SCRIPT>
<SCRIPT src="/1m3f/Common_Development/Tools.js"></SCRIPT>
<script language="javascript">...
?? ?
var totalByte=[0,0];
var uploadedByte=[0,0];
var halder=[];
var uploadForms=[];
//var totalBar=[];
var goBar=[];
var rightfulExts=...{};
rightfulExts.rar="";
rightfulExts.jpg="";
rightfulExts.exe="";
rightfulExts.iso="";
rightfulExts.gif="";
rightfulExts.ini="";
rightfulExts.rmvb="";
rightfulExts.pdf="";
function upload()...{
??? var l=uploadForms.length;
??? for(var i=0;i<l;i++)...{
??????? var ext=uploadForms[i].fileData.value.split(".").pop().toLowerCase();
??????? if(!(ext in rightfulExts)&&ext!="")...{
??????????? alert("第"+(i+1)+"个文件类型不匹配！");
??????????? return false;
??????? }
??????? if(ext!="")...{
??????????? uploadForms[i].saveName.value=getNewId("13","fileUpload13")+"."+ext;
??????? uploadForms[i].curCount.value=i;
??????? }
??? }
???
??? uploadForms[0].submit();
??? totalByte[0]=0;
??? halder[0]=window.setInterval("getTotalByte("+0+");",1);
???
??? uploadForms[1].submit();
??? totalByte[1]=0;
??? halder[1]=window.setInterval("getTotalByte("+1+");",1);
}
function getTotalByte(c)...{
??? totalByte[c]=getSession("totalByte"+c);
??? if(totalByte[c]!=0&&totalByte[c]!=false)...{
??????? //totalBar[c].innerHTML=totalByte[c];
??????? window.clearInterval(halder[c]);
??????? var t=Math.ceil(Math.log(totalByte[c]));
??????? halder[c]=window.setInterval("getUploadedByte("+c+");",t*t);
??? }
}
function getUploadedByte(c)...{
??? uploadedByte[c]=getSession("uploadedByte"+c);
??? var percent=Math.floor((uploadedByte[c]/totalByte[c])*100);
??? goBar[c].style.width=percent+"%";
??? if(totalByte[c]==uploadedByte[c])...{
??????? window.clearInterval(halder[c]);
??? }
}
function windowOnload()...{
??? uploadForms=[document.forms["uploadForm0"],document.forms["uploadForm1"]];
??? //totalBar=[$("totalCountainer0"),$("totalCountainer1")];
??? goBar=[$("uploadedCountainer0"),$("uploadedCountainer1")];
}
function windowInit()...{
??? $("upload").onclick=upload;
}
</script>
</head>
<body onload="windowInit();windowOnload();">
??? <iframe src="about:blank" name="fileUploadFrame0" style="display:none;" >
??? </iframe>
??? <form name="uploadForm0" action=.upload method="post" enctype="multipart/form-data" target="fileUploadFrame0">
??????? <table>
??????????? <tr>
??????????????? <td>
??????????????????? 文件1
??????????????? </td>
??????????????? <td>
??????????????????? <input type="hidden" name="curCount"/>
??????????????????? <input type="hidden" name="savePath" value="images" />
??????????????????? <input type="hidden" name="saveName" />
??????????????????? <input type="hidden" name="canOverWrite" value="true" />
??????????????????? <input type="file" name="fileData" />
??????????????? </td>
??????????? </tr>
??????? </table>
??? </form>
??? <div id="totalCountainer0" style="width:500px;border-style:solid;border-color:#4062E8">
??????? <div id="uploadedCountainer0" style="background-image:url(/1m3f/images/downloadbar.png);width:0%;"></div>
??? </div>
???
???
??? <iframe src="about:blank" name="fileUploadFrame1" style="display:none;" >
??? </iframe>
??? <form name="uploadForm1" action=.upload method="post" enctype="multipart/form-data" target="fileUploadFrame1">
??????? <table>
??????????? <tr>
??????????????? <td>
??????????????????? 文件2
??????????????? </td>
??????????????? <td>
??????????????????? <input type="hidden" name="curCount" />
??????????????????? <input type="hidden" name="savePath" value="images" />
??????????????????? <input type="hidden" name="saveName" />
??????????????????? <input type="hidden" name="canOverWrite" value="true" />
??????????????????? <input type="file" name="fileData" />
??????????????? </td>
??????????? </tr>
??????? </table>
??? </form>
??? <div id="totalCountainer1" style="width:500px;border-style:solid;border-color:#4062E8">
??????? <div id="uploadedCountainer1" style="background-image:url(/1m3f/images/downloadbar.png);width:0%;"></div>
??? </div>
??? <input id="upload" type="button" value="上传" />
</body>
</html>
上传后台servlet代码：
package test;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import tools.FileUpload;
import common.Global;
public class UploadAction extends HttpServlet ...{
??? private static final String ROOT_PATH = Global.getRootPath();
??? private static final String ENCODING = Global.getEncoding();
??? static final long MAX_SIZE = Global.getMaxSize();
??? public void doPost(HttpServletRequest request, HttpServletResponse response) ...{
??????? PrintWriter out = null;
??????? try ...{
??????????? // 设置字符集编码
??????????? response.setContentType("text/html;charset=" + ENCODING);
??????????? request.setCharacterEncoding(ENCODING);
??????????? out = response.getWriter();
??????????? FileUpload f = new FileUpload(request);
??????????? f.setMaxSize(MAX_SIZE);
??????????? f.setRootPath(ROOT_PATH);
??????????? long start = System.currentTimeMillis();
??????????? boolean bf = f.uploade();
??????????? long end = System.currentTimeMillis();
??????????? System.out.println("用时:" + (end - start));
??????????? if (bf) ...{
??????????????? out.print(Global.OK + Global.BLC_X_CODE);
??????????????? out.print(f.getUserInfo());
??????????????? out.print(Global.BLC_X_CODE);
??????????????? out.print(f.getSysInfo());
??????????? } else ...{
??????????????? out.print(Global.NO_OK + Global.BLC_X_CODE);
??????????????? out.print(f.getUserInfo());
??????????????? out.print(Global.BLC_X_CODE);
??????????????? out.print(f.getSysInfo());
??????????? }
??????? } catch (IOException e) ...{
?
<script?language="javascript">...
var?rightfulExts=...{};