上传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);
            }
        else ...{      
              window.setTimeout('refreshProgress()', 1000);
        }
        return true;
    }

    function startProgress()...{
        var file = document.getElementById("file");
        if (file.value == "")...{
            alert("请选择上传文件");
            return ;
        }

        document.getElementById("loader_container").style.display = "block";
       document.getElementById('persont').innerHTML = '上传进度: 0%';

    window.setTimeout("refreshProgress()", 3000);
         document.forms[0].submit();
    }
</script>
<!-- 下面是使用DWR必须调用的 -->
<script src='${ctx }/dwr/interface/UploadMonitor.js'></script>
<script src='${ctx }/dwr/engine.js'> </script>
<script src='${ctx }/dwr/util.js'> </script>

下面这一段是loading条的样式内容

<style>
#loader_container {...}{
    text-align:center;
    position:absolute;
    top:40%;
    width:100%;
    left: 0;
}
#loader {...}{
    font-family:Tahoma, Helvetica, sans;
    font-size:11.5px;
    color:#000000;
    background-color:#FFFFCC;
    padding:10px 0 16px 0;
    margin:0 auto;
    display:block;
    width:220px;
    border:1px solid #FF0000;
    text-align:left;
    z-index:2;
}
#progress {...}{
    height:5px;
    font-size:1px;
    width:1px;
    position:relative;
    top:1px;
    left:0px;
    background-color:#0044AA;
}
#loader_bg {...}{
    background-color:#e4e7eb;
    position:relative;
    top:8px;
    left:8px;
    height:7px;
    width:200px;
    font-size:1px;
}
</style>

至于后台，首先在web.xml中配置DWR的servlet

<servlet> 
    <servlet-name>dwr-invoker</servlet-name> 
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> 
      <init-param> 
        <param-name>debug</param-name> 
        <param-value>true</param-value> 
    </init-param> 
    <load-on-startup>1</load-on-startup> 
</servlet>

<servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

还需价格dwr.xml的文件，在WEB-INF下和web.xml同目录, 这里可以看出我是用DWR 2.0吧

<!DOCTYPE dwr PUBLIC  "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"  
"http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
    <allow>
        <create creator="new" javascript="UploadMonitor">
            <param name="class" value="packageName.UploadMonitor" />
        </create>
        <convert converter="bean" match="packageName.UploadInfo" />
    </allow>
</dwr>

这里描述了两个类UploadMonitor和UploadInfo，至于create和convert我懒得说了，UploadMonitor类用于js调用，

UploadInfo用来描述文件对象。

UploadMonitor类：

import javax.servlet.http.HttpServletRequest;
import org.directwebremoting.WebContextFactory;

public class UploadMonitor ...{
    public UploadInfo getUploadInfo() ...{
        HttpServletRequest req = WebContextFactory.get()
                .getHttpServletRequest();
        
        if (req.getSession().getAttribute("uploadInfo") != null)...{            
            return (UploadInfo) req.getSession().getAttribute("uploadInfo");
        }
        else            
            return new UploadInfo();
    }
}

UploadInfo类：

public class UploadInfo ...{
    private long totalSize = 0;

    private long bytesRead = 0;

    private long elapsedTime = 0;

    private String status = "done";

    private int fileIndex = 0;

    public UploadInfo() ...{
    }

    public UploadInfo(int fileIndex, long totalSize, long bytesRead,
            long elapsedTime, String status) ...{
        this.fileIndex = fileIndex;
        this.totalSize = totalSize;
        this.bytesRead = bytesRead;
        this.elapsedTime = elapsedTime;
        this.status = status;
    }

    public String getStatus() ...{
        return status;
    }

    public void setStatus(String status) ...{
        this.status = status;
    }

    public long getTotalSize() ...{
        return totalSize;
    }

    public void setTotalSize(long totalSize) ...{
        this.totalSize = totalSize;
    }

    public long getBytesRead() ...{
        return bytesRead;
    }

    public void setBytesRead(long bytesRead) ...{
        this.bytesRead = bytesRead;
    }

    public long getElapsedTime() ...{
        return elapsedTime;
    }

    public void setElapsedTime(long elapsedTime) ...{
        this.elapsedTime = elapsedTime;
    }

    public boolean isInProgress() ...{        
        return "progress".equals(status) || "start".equals(status);
    }

    public int getFileIndex() ...{
        return fileIndex;
    }

    public void setFileIndex(int fileIndex) ...{
        this.fileIndex = fileIndex;
    }
}

java代码， 可以在action调用该方法

private File loadFile(FormFile file, HttpServletRequest request,
            HttpServletResponse response) ...{

        OutputStream out = null;
        InputStream in = null;
        File upFile = null;
        try ...{
            String realPath = request.getSession().getServletContext()
                    .getRealPath(File.separator);
            File f = new File(realPath + "file_import");
            if (!f.exists())
                f.mkdirs();

            // 防止文件名重复
            String guid = null;
            do ...{
                guid = CommTool.GuidGen();  //生成随机32位id
                upFile = new File(realPath + "file_import" + File.separator
                        + "import_" + guid + ".xls");  //本来是要上传xsl文件用于解析滴
            } while (upFile.exists());

            in = file.getInputStream();
            out = new FileOutputStream(upFile);
            // 1m 缓存
            byte[] buff = new byte[1024];

            UploadInfo info = new UploadInfo();
            int len = 0;
            while ((len = in.read(buff)) != -1) ...{
                info.setStatus("progress");
                info.setTotalSize(file.getFileSize());
                info.setBytesRead(info.getBytesRead() + len);
                request.getSession().setAttribute("uploadInfo", info);
                out.write(buff, 0, len);
            }
            request.getSession().removeAttribute("uploadInfo");
        } catch (Exception e) ...{
            throw new Exception("the error info is " + e.getMessage());
        } finally ...{
            try ...{
                if (out != null)
                    out.close();
                if (in != null)
                    in.close();
            } catch (Exception e) ...{
                e.printStackTrace();
            }
        }
        return upFile;
}

大概就这样了

以下是实现的效果图

呵呵， 刚看完男儿本色， 就上传它玩玩

呵呵，一个很简单的loading条就完了