[转]采用dwr+ajax和struts开发文件上传进度条

最新推荐文章于 2024-07-26 20:46:33 发布

whatsup123

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量1k

点赞数

文章标签： struts dwr ajax path file javascript

编写监听器以及相关的类

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

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>

< style type = "text/css" >

#progressBar { padding-top: 5px; }

#progressBarBox { width: 350px; height: 20px; border: 1px inset; background: #eee;}

#progressBarBoxContent { width: 0; height: 20px; border-right: 1px solid #444; background: blue; }

</style>

< LINK href = "<%=path%>/css/style.css"type="text/css" rel="stylesheet">

< meta http-equiv = "Content-Type" content = "text/html; charset=gb2312" >

</ head >

< style type = "text/css" >

<!--

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

-->

</ style >

< 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 >

</ td >

</ tr >

</ table >

</ form >

</ body >

</ html >

并且要修改一下 /resources/js 中的 upload.js 文件：

/* Licence:

* Use this however/wherever you like, just don't blame me if it breaks anything.

* Credit:

* If you're nice, you'll leave this bit:

* Class by Pierre-Alexandre Losson -- http://www.telio.be/blog

* email : plosson@users.sourceforge.net

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>

</allow>

</dwr>

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

<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>

编写 struts 的 MultipartRequestHandler ：AjaxMultipartRequestHandler

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

<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" );

}

原文作者:volcano_hosan

whatsup123

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
[转]采用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
复制链接

扫一扫