Ajax + Servlet 实现上传文件进度条显示
用到了commons-fileupload-1.1.jar和commons-io-1.2.jar两个包
客户端文件upload.jsp
<%@ page language="java" pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP ''upload.jsp'' starting page</title>
<script type="text/javascript">
var xmlHttp ;
function createXMLHttp(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
xmlHttp = new XMLHttpRequest() ;
}
}
function ajaxSend(){
createXMLHttp() ;
var content = "status" ;
var url ="upload?status="+content ;
xmlHttp.onreadystatechange = handler ;
xmlHttp.open("POST",url,true) ;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(url) ;
}
function handler(){
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var percent = xmlHttp.responseText ;
var com = document.getElementById("com") ;
var last = document.getElementById("last") ;
var p = document.getElementById("percent") ;
com.setAttribute("width",percent+"%") ;
last.setAttribute("width",(100-percent)+"%") ;
if(percent < 99){
p.innerHTML="已经完成："+percent+"%" ;
setTimeout("ajaxSend()",100) ;
}
else{
p.innerHTML="已经全部上传！" ;
}
}
}
return true;
}
function mySubmit(form){
form.action="upload" ;
form.submit() ;
ajaxSend()
}
</script>
</head>
<body>
<form enctype="multipart/form-data" name="fileform" method="post"
target="target_upload">
<input type="file" value="浏览" name="fileUpload" />
<input type="button" value="提交" onclick="mySubmit(fileform)" />
</form>
<div id="status">
<table width="100%">
<tbody>
<tr>
<td>
<table width="30%" align="left">
<tbody>
<tr>
<td width="0%" bgcolor="green" height="25px" id="com">
</td>
<td width="100%" bgcolor="#CCCCCC" id="last">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td id="percent" align="center"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Servlet文件MyUpload.java
package zbq.upload;
推荐文章 |