Junky's IT Notebook

统计

留言簿(8)

积分与排名

WebSphere Studio

阅读排行榜

评论排行榜

采用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.xmllib下面的jar文件

上传页面

在上面解开的包里面有index.jsp这个是上传页面,upload.jsp负责上传,resources包里面包含了dwr与服务器通讯的javascript脚本,你需要把index.jspform中的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>

            </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 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,省略springstruts等的配置

<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.xmlcontroller中替换默认的multipartClass

<controller>

              <set-property property="multipartClass"

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

</controller>

其实这个类AjaxMultipartRequestHandler编写很简单,把strutssrc源码中的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");

    }

-------------------------一切ok------------------------

posted on 2007-04-16 17:31 junky 阅读(4228) 评论(6)  编辑  收藏 所属分类: web

评论

# re: 采用dwr+ajax和struts开发文件上传进度条(转)[未登录] 2007-07-27 22:21 gosyl

请问struts源码的版本是那一个 谢谢
!  回复  更多评论   

# re: 采用dwr+ajax和struts开发文件上传进度条(转) 2007-08-06 10:15 付金山

非常感谢能看到该篇文章,目前小弟正在学习使用上传进度条(使用struts技术上传文件)。按照本文章一一试过过还是不行,主要有2个问题:
1.在修改CommonsMultipartRequestHandler.java换成AjaxMultipartRequestHandler.java时出现问题:
static Class _mthclass$(String x0)
{
return Class.forName(x0);
x1;
......
}
这个地方出现问题.
2.找不到UploadMonitor.js。
3.运行的时候说:"UploadMonitor"未定义。
第一个可能是struts版本的问题,第2个就不知道怎样解决,请帮忙查看一下,小弟非常感谢。我的E_mail是:fujinshan_403@163.com。谢谢。  回复  更多评论   

# re: 采用dwr+ajax和struts开发文件上传进度条(转) 2007-11-30 17:54 Nara

Gooooooooooooooooooooooooooooooooooooooooood
why size max  回复  更多评论   

# re: 采用dwr+ajax和struts开发文件上传进度条(转) 2008-01-08 21:36 hero

性能好像有点低哦  回复  更多评论   

# re: 采用dwr+ajax和struts开发文件上传进度条(转) 2008-01-08 21:39 hero

比我原来上传的速度慢了n倍……  回复  更多评论   

# re: 采用dwr+ajax和struts开发文件上传进度条(转) 2008-12-23 16:18 小东

都是转的 垃圾啊  回复  更多评论   


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


网站导航: