上传loading条的实现

来源：互联网发布：单元刚度矩阵编辑：程序博客网时间：2024/06/11 01:35

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

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

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

了。

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

吧，最直接了。

<form action="filemanager.do?method=FileLoad"

method=post ENCTYPE="multipart/form-data" onsubmit="startProgress()">

<tr>

<td>

上传内容 <input type="file" name="file" id="file" >

</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代码

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>

下面这一段是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-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>

</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条就完了