java ajax 进度条_基于ajax实现文件上传并显示进度条

下面给大家分享下基于ajax实现文件上传并显示进度条。在jsp部分，需要设计一个表单，form的属性添加 enctype="multipart/form-data"，设计一个iframe，作为隐藏。form的target等于iframe的name;

在servlet部分：文件上传用的Commons-FileupLoad，需要两个Jar，commons-fileupload和commons-io,少了第二个会报出找不到类的异常；

第一个servlet处理上传，及把上传进度保存到session,第二个servlet处理ajax请求,回传session保存的进度值；

进度条：可以用ajax拿到回传的进度值，改变图片的width实现变化；

jsp代码：

pageEncoding="UTF-8"%>

Insert title here

0%

这是index.jsp里的代码：

提交后还在当前页显示进度，所以要用到iframe，提交后的返回放到隐藏的iframe里，不影响页面效果；

css代码：

.pro{

height:15px;

width:500px;

background: #FFFFF0;

border: 1px solid #8FBC8F;

margin: 0;

padding: 0;

display:none;

position: relative;

left:25px;

float:left;

}

js代码

function go(){

f1.submit();

document.getElementById("pro").style.display="block";

document.getElementById("prop").style.display="";

timer=setInterval("getP()",50);

}

var xmlHttpRequest;

function getP(){

if(window.XmlHttpRequest){

xmlHttpRequest=new XmlHttpRequest();

}else{

xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlHttpRequest.onreadystatech