<script language="javascript" src="https://www.jb51.net/js/request.js"></script> <script language="javascript"> var request = false; function getProgress(){ var url="showProgress.jsp"; //服务器地址 var param ="nocache="+new Date().getTime(); //每次请求URL参数都不同 ，避免上传时进度条不动 request=httpRequest("post",url,true,callbackFunc,param); //调用请求方法 } //Ajax回调函数 function callbackFunc(){ if( request.readyState==4 ){ //判断响应是否完成 if( request.status == 200 ){ //判断响应是否成功 var h = request.responseText; //获得返回的响应数据，该数据位上传进度百分比 h=h.replace(/\s/g,""); //去除字符串中的Unicode空白符 document.getElementById("progressPercent").style.display=""; //显示百分比 progressPercent.innerHTML=h+"%"; //显示完成的百分比 document.getElementById("progressBar").style.display="block"; //显示进度条 document.getElementById("imgProgress").width=h*(235/100); //显示完成的进度 } } } </script>
（5）编写showProgress.jsp页面，在该页中应用EL表达式输出保存在session域中的上传进度条的值，具体代码如下：
<%@page contentType="text/html" pageEncoding="GBK"%> ${progressBar}
（6）编写表单提交按钮onclick事件所调用的JavaScript方法，在该方法通过window对象的setInterval()方法每隔一定时间请求一次服务器，获得最新的上传进度，关键代码如下：
function deal(form){ form.submit(); //提交表单 timer=window.setInterval("getProgress()",500); //每隔500毫秒获取一次上传进度 }
以上所述是小编给大家介绍的基于Ajax技术实现文件上传带进度条的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: