$("#progressInfo").html("上传成功!");
}
}});};
var intId = window.setInterval(eventFun,500);
});
});
</script>
<style>
#graphbox{
border:1px solid #e7e7e7;
padding:5px;
width:350px;
background-color:#f8f8f8;
margin:5px 0;
display:none;
}
.graph{
position:relative;
background-color:#F0EFEF;
border:1px solid #cccccc;
padding:2px;
font-size:10px;
font-weight:500;
}
.graph .progressbar{
position:relative;
text-align:right;
color:#ffffff;
height:10px;
line-height:10px;
font-family:Arial;
display:block;
}
.graph .progressbar{background-color:#66CC33;}
</style>
</head>
<body>
<form id='fForm' class="form-actions form-horizontal" action="/uploadtest/UploadFileServlet.do"
encType="multipart/form-data" target="uploadf" method="post">
<div class="control-group">
<label class="control-label">上传文件:</label>
<div class="controls">
<input type="file" name="file" style="width:350px"></br>
<input type="file" name="file2" style="width:350px"></br>
<button type="button" id="subbut" class="btn">上传</button>
</div>
<div id="graphbox">
<div class="graph">
<span class="progressbar" style="width:0%;"><span id="uploadPer"></span></span>
</div>
</div>
<div id='progressInfo'>
</div>
</div>
</form>
<iframe name="uploadf" style="display:none"></iframe>
</body>
</html>
将项目部署到tomcat(或其他web容器),访问http://172.16.126.128:8080/uploadtest/upload2.html
效果:


代码下载:demo










