采用dwr ajax和struts开发文件上传进度条

编写监听器以及相关的类

不用自己写了,源码可以从

http://www.telio.be/blog/2006/01/06/ajax-upload-progress-monitor-for-commons-fileupload-example里面下载,

下载地址

http://www.telio.be/blog/wp-content/uploads/2006/01/ajax-upload-1.0.war

下载完之后,你需要解包,在命令行中:

jar xvf ajax-upload-1.0.war
源码就在\WEB-INF\src下面

将要用到的文件有resources文件夹下,\WEB-INF\下面的dwr.xml和lib下面的jar文件

上传页面

在上面解开的包里面有index.jsp这个是上传页面,upload.jsp负责上传,resources包里面包含了dwr与服务器通讯的javascript脚本,你需要把index.jsp的form中的action换成你的struts action即可,然后把form中的file名改成你actionform中的file属性名,把页面中剩余的file去掉

index.jsp上传页面示例代码:

<%@ page contentType="text/html; charset=gb2312" language="java"

import="java.util.*" errorPage=""%>

<%

String path=request.getContextPath();

%>

<html locale="true">

<head>

<SCRIPT language=javascript>

 

function check_file() {

 

var strFileName=document.forms(0).file;

 

if (strFileName.value==""){

alert("请选择要上传的文件");

return false;

}

startProgress();

}

 

function loadmessage(){

 

<%

if (request.getAttribute("message") != null) {

%>

window.alert("<%=request.getAttribute("message")%>");

window.returnValue="yes";

 

<%}%>

 

}

 

</SCRIPT>

<title>上传</title>

<script src='<%=path%>/resources/js/upload.js'> </script>

 

<script src='<%=path%>/dwr/interface/UploadMonitor.js'> </script>

 

<script src='<%=path%>/dwr/engine.js'> </script>

<script src='<%=path%>/dwr/util.js'> </script>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="loadmessage()">

<form name="form" method="post" action="<%=path%>/upload.do?method=upload" enctype="multipart/form-data" onSubmit="return check_file()">

<table width="60%" border="0" cellspacing="1">

<tr background-color=" #E7F5FE">

 

<td width="30%" align="right">从文件导入:</td>

<td width="51%"><input type="file" name="file" class="input"></td>

<td width="27%"><input type="submit" name="files" class="button_4"

 

style="border-style:None;width:71px;" value="确定" id="uploadbutton">

</td>

</tr>

 

<tr align="left" background-color=" #E7F5FE">

 

 

<td colspan="3">

<div id="progressBar" style="display: none;">

 

<div id="theMeter">

<div id="progressBarText"></div>

<div id="progressBarBox">

<div id="progressBarBoxContent"></div>

 

</div>

 

</div>

</div>

</td>

 

</tr>

 

</table>

 

</form>

</body>

 

</html>

并且要修改一下\resources\js中的upload.js文件:

function refreshProgress()

 

{

UploadMonitor.getUploadInfo(updateProgress); 

}

function updateProgress(uploadInfo)

 

{

if (uploadInfo.inProgress)

{

document.getElementById('uploadbutton').disabled = true;

document.getElementById('file').disabled = true;

var fileIndex = uploadInfo.fileIndex;

 

var progressPercent = Math.ceil((uploadInfo.bytesRead / uploadInfo.totalSize) * 100);

document.getElementById('progressBarText').innerHTML = '文件读取进度: ' progressPercent '%';

document.getElementById('progressBarBoxContent').style.width = parseInt(progressPercent * 3.5) 'px';

window.setTimeout('refreshProgress()', 1000);

}

else

{

document.getElementById('uploadbutton').disabled = false;

document.getElementById('file').disabled = false;

}

return true;

}

function startProgress()

{

 

document.getElementById('progressBar').style.display = 'block';

document.getElementById('progressBarText').innerHTML = '文件读取进度: 0%';

document.getElementById('uploadbutton').disabled = true;

// wait a little while to make sure the upload has started ..

window.setTimeout("refreshProgress()", 1000);

return true;

 

}

配置dwr.xml

 

放在/WEB-INF/下面

 

 

<dwr>

 

<allow>

<create creator="new" javascript="UploadMonitor">

<param name="class" value="be.telio.mediastore.ui.upload.UploadMonitor"/>

</create>

<convert converter="bean" match="be.telio.mediastore.ui.upload.UploadInfo"/>

</allow>

 

</dwr>

web.xml中配置dwr,省略spring,struts等的配置

 

<servlet>

<servlet-name>dwr-invoker</servlet-name>

 

<display-name>DWR Servlet</display-name>

 

 

<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>

 

 

<init-param>

<param-name>debug</param-name>

 

<param-value>false</param-value>

</init-param>

 

<init-param>

<param-name>logLevel</param-name>

<param-value>WARN</param-value>

</init-param>

</servlet>

 

<servlet-mapping>

 

<servlet-name>dwr-invoker</servlet-name> 

<url-pattern>/dwr/*</url-pattern> 

</servlet-mapping>

编写strutsMultipartRequestHandler :AjaxMultipartRequestHandler

实现 MultipartRequestHandler接口并在struts-config.xml的controller中替换默认的multipartClass

<controller>

<set-property property="multipartClass"

value="org.springside.components.ajaxupload.AjaxMultipartRequestHandler" />

 

 

</controller>

其实这个类AjaxMultipartRequestHandler编写很简单,把struts的src源码中的org.apache.struts.upload.CommonsMultipartRequestHandler.java修改一下就可以了

public void handleRequest(HttpServletRequest request)

 

throws ServletException {

 

方法中把定义factory之前的那几行代码注释掉然后写入

 

UploadListener listener = new UploadListener(request, 30);

 

FileItemFactory factory = new MonitoredDiskFileItemFactory(listener);

之后再注释掉

 

// upload.setSizeThreshold((int) getSizeThreshold(ac));

// upload.setRepositoryPath(getRepositoryPath(ac));

 

这个类就算写完了

 

编写struts上传类

就用你原来编写的struts上传类
上传方法代码段示例:

 

/**

 

 

* 上传文件

 

*/

public ActionForward upload(ActionMapping mapping, ActionForm form,

 

HttpServletRequest request, HttpServletResponse response)

 

throws Exception {

String path = getServlet().getServletContext().getRealPath("/");

 

log.info(">>>>>>>>>>>>>>>path:" path);

 

if (form == null) {

return mapping.findForward("success");

}

 

FileUploadForm fuf = (FileUploadForm) form;

FormFile file = fuf.getFile();

try {

 

if (file == null) {

log.info(">>>>>>>>>>>>>>>file为空");

 

return mapping.findForward("success");

 

}

} catch (Exception e) {

e.printStackTrace();

 

}

String fname = file.getFileName();

 

int t = 0;

 

for (int i = 0; i < fname.length(); i ) {

 

if (fname.charAt(i) == '.') {

 

t = i;

} }

 

 

String filename = null;
if (t > 0) {

 

filename = fname.substring(0, t);

}

 

log.info(">>>>>>>>>>>>>>>文件名:" filename);

 

String filepath = path "dataimport/upfiles/" fname;

File f = new File(path "dataimport/upfiles/");

 

log.info(">>>>>>>>>>>>>>>文件生成路径:" filepath);
if (!f.exists()) {

 

 

f.mkdirs();

} else {

log.info(">>>>>>>>>>>>>>>路径存在");

}

 

 

InputStream stream = file.getInputStream();

OutputStream os = new FileOutputStream(path "dataimport/upfiles/"

 

 

fname);

int readBytes = 0;

 

byte buffer[] = new byte[8192];

while ((readBytes = stream.read(buffer, 0, 8192)) != -1) {

 

os.write(buffer, 0, readBytes);

 

}

os.close();

 

stream.close();

 

file.destroy();

 

 

String message = "成功!";

 

request.setAttribute("message", message);

return mapping.findForward("success");

}

posted on 2008-10-24 14:00 deepbluesea 阅读(1297) 评论(2)  编辑  收藏 所属分类: JS

评论

# re: 采用dwr ajax和struts开发文件上传进度条 2008-12-23 15:48 小东

搞不明白 跟<controller>

<set-property property="multipartClass"

value="org.springside.components.ajaxupload.AjaxMultipartRequestHandler" />





</controller> 里的春天傍边也什么关系吗

  回复  更多评论   

# re: 采用dwr ajax和struts开发文件上传进度条[未登录] 2008-12-25 08:53 deepbluesea

@小东
没明白  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 
<2008年10月>
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

导航

统计

公告

MSN:zzlljj8833@hotmail.com lava:5832911

常用链接

留言簿(1)

随笔分类(9)

随笔档案(18)

文章分类(1)

文章档案(1)

搜索

最新评论

阅读排行榜

评论排行榜