采取dwr+ajax和struts开发文件上传进度条(转)-AJAX教程-爱易网页

采取dwr+ajax和struts开发文件上传进度条(转)

日期：2014-05-16　浏览次数：20652 次

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

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

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

采取dwr+ajax和struts开发文件上传进度条(转)

相关资料更多>

推荐阅读更多>