上传loading条的实现

        前个项目结束有段时间了，发现人很奇怪，原来觉得太累，现在稍微休息下就觉得有点空虚，主要是也休息太

长时间了，快两个月了，公司的人员管理比较混乱，人人都像救火队员。哎，发牢骚也没用，既然比较闲就觉得把

以前的东西稍微整理下，做个记录。前个项目也没多少得意的地方，就有个上传的loading做得还有点意思，就它

了。 

        我是采用DWR来实现js访问java后台的，可能是隔的时间太久了，有点忘了，不知该怎么组织语言，贴代码

吧，最直接了。

< form  action ="filemanager.do?method=FileLoad"
    method =post  ENCTYPE ="multipart/form-data"  onsubmit ="startProgress()" >
< table  width ="100%"  border ="0"  cellspacing ="0"  cellpadding ="0" >
                     < tr >
                         < td >
                        上传内容  < input  type ="file"  name ="file"  id ="file"   >
                        
                             < div  id ="loader_container"  style ="display:none" >                         
                             < div  id ="loader" >
                                 < div  id ="persont"  align ="center" ></ div >
                                 < div  align ="center" ></ div >
                             < div  id ="loader_bg" >
                                 < div  id ="progress" ></ div >
                             </ div >
                             </ div >
                             </ div >
                         </ td >
                         < td  width ="120"  align ="center" >< div  id ="show" >< img  id ="uploadbutton"
                            src ="../img/button/load.gif"   height ="24"
                            onclick ="startProgress()"
                            onmouseover ="this.style.cursor='hand'" >   </ div >                 
                         </ td >
                     </ tr >             
</ table >
</ form >

JSP页面，点击上传后调用startProgress()方法，这中间的多个DIV嵌套就是用来显示loading条的，下面的js代码

< script language = " javascript " >     
     function  refreshProgress() ... {
        UploadMonitor.getUploadInfo(updateProgress);
    }

     function  updateProgress(uploadInfo) ... {
        if (uploadInfo.inProgress)...{   
            document.getElementById("file").disabled="true";            
            document.getElementById("show").style.display = "none";
               document.getElementById("hidden").style.display = "block";
               
            var progressPercent = Math.ceil((uploadInfo.bytesRead / uploadInfo.totalSize) * 100);

               document.getElementById('persont').innerHTML = '上传进度: ' + progressPercent + '%';

            document.getElementById('progress').style.width = (progressPercent / 100) * 200;
       
            window.setTimeout('refreshProgress()', 1000);