`
longgangbai
  • 浏览: 7249369 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

DWR中各种java方法的调用总结

DWR推送JavaJavaScriptServletDWR上传 
阅读更多
一、dwr配置篇之web.xml
1、最小配置
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
2、当我们想看DWR自动生成的测试页（Using debug/test mode）时，可在servlet配置中加上
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
这个参数DWR默认是false。如果选择true，我们可以通过http://localhost:port/app/dwr看到你部署的每个DWR class。并且可以测试java代码的每个方法是否运行正常。为了安全考虑，在正式环境下你一定把这个参数设为false。
3、多个dwr.xml文件的配置
可能有几种情况，我们一一列举。一个servlet，多个dwr.xml配置文件；多个servlet，每个servlet对应一个或多个dwr.xml配置文件。
3.1、一个servlet，多个dwr.xml配置文件
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>config-1</param-name>
<param-value>WEB-INF/dwr1.xml</param-value>
</init-param>
<init-param>
<param-name>config-2</param-name>
<param-value>WEB-INF/dwr2.xml</param-value>
</init-param>
</servlet>
在这种配置下，param-name的值必须以config开头。param-name可以有>=0个。如果没有param-name，那么将会读取 WEB-INF/dwr.xml。如果有大于零个param-name，那么WEB-INF/dwr.xml文件将不会被读取。
3.2、多个servlet，每个servlet对应一个或多个dwr.xml
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet
</servlet-class>
</servlet>
<servlet>
<servlet-name>dwr-invoker1</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet
</servlet-class>
<init-param>
<param-name>config-admin</param-name>
<param-value>WEB-INF/dwr1.xml</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>dwr-invoker1</servlet-name>
<url-pattern>/dwr1/*</url-pattern>
</servlet-mapping>
在这种情况下，我们可以根据J2EE security来控制权限，针对不同url,加不同的角色。

AB:调用没有返回值和参数的JAVA方法

AC:调用有简单返回值的java方法

AD:调用有简单参数的java方法

AE:调用返回JavaBean的java方法

AF:调用有JavaBean参数的java方法

AG:调用返回List、Set或者Map的java方法

AH:调用有List、Set或者Map参数的java方法
二、dwr使用篇

AB
1、调用没有返回值和参数的JAVA方法
1.1、dwr.xml的配置
<dwr>
<allow>
<create creator="new" javascript="testClass" >
<param name="class" value="com.dwr.TestClass" />
<include method="testMethod1"/>
</create>
</allow>
</dwr>
<allow>标签中包括可以暴露给javascript访问的东西。
<create>标签中指定javascript中可以访问的java类，并定义DWR应当如何获得要进行远程的类的实例。creator="new"属性指定java类实例的生成方式，new意味着DWR应当调用类的默认构造函数来获得实例，其他的还有spring方式，通过与IOC容器Spring进行集成来获得实例等等。javascript=" testClass "属性指定javascript代码访问对象时使用的名称。
<param>标签指定要公开给javascript的java类名。
<include>标签指定要公开给javascript的方法。不指定的话就公开所有方法。
<exclude>标签指定要防止被访问的方法。
1.2、javascript中调用
首先，引入javascript脚本
<script src='dwr/interface/ testClass.js'></script>
<script src='dwr/engine.js'></script>
<script src='dwr/util.js'></script>
其中TestClass.js是dwr根据配置文件自动生成的，engine.js和util.js是dwr自带的脚本文件。
其次，编写调用java方法的javascript函数
Function callTestMethod1(){
testClass.testMethod1();
}

 

AC
2、调用有简单返回值的java方法
2.1、dwr.xml的配置
配置同1.1
<dwr>
<allow>
<create creator="new" javascript="testClass" >
<param name="class" value="com.dwr.TestClass" />
<include method="testMethod2"/>
</create>
</allow>
</dwr>
2.2、javascript中调用
首先，引入javascript脚本
其次，编写调用java方法的javascript函数和接收返回值的回调函数
Function callTestMethod2(){
testClass.testMethod2(callBackFortestMethod2);
}
Function callBackFortestMethod2(data){
//其中date接收方法的返回值
//可以在这里对返回值进行处理和显示等等
alert("the return value is " + data);
}
其中callBackFortestMethod2是接收返回值的回调函数

 

AD
3、调用有简单参数的java方法
3.1、dwr.xml的配置
配置同1.1
<dwr>
<allow>
<create creator="new" javascript="testClass" >
<param name="class" value="com.dwr.TestClass" />
<include method="testMethod3"/>
</create>
</allow>
</dwr>
3.2、javascript中调用
首先，引入javascript脚本
其次，编写调用java方法的javascript函数
Function callTestMethod3(){
//定义要传到java方法中的参数
var data;
//构造参数
data = “test String”;
testClass.testMethod3(data);
}

 

AE
4、调用返回JavaBean的java方法
4.1、dwr.xml的配置
<dwr>
<allow>
<create creator="new" javascript="testClass" >
<param name="class" value="com.dwr.TestClass" />
<include method="testMethod4"/>
</create>
<convert converter="bean" match=""com.dwr.TestBean">
<param name="include" value="username,password" />
</convert>
</allow>
</dwr>
<creator>标签负责公开用于Web远程的类和类的方法，<convert>标签则负责这些方法的参数和返回类型。convert元素的作用是告诉DWR在服务器端Java 对象表示和序列化的JavaScript之间如何转换数据类型。DWR自动地在Java和JavaScript表示之间调整简单数据类型。这些类型包括Java原生类型和它们各自的封装类表示，还有String、Date、数组和集合类型。DWR也能把JavaBean转换成JavaScript 表示，但是出于安全性的原因，要求显式的配置，<convert>标签就是完成此功能的。converter="bean"属性指定转换的方式采用JavaBean命名规范，match=""com.dwr.TestBean"属性指定要转换的javabean名称，<param>标签指定要转换的JavaBean属性。
4.2、javascript中调用
首先，引入javascript脚本
其次，编写调用java方法的javascript函数和接收返回值的回调函数
Function callTestMethod4(){
testClass.testMethod4(callBackFortestMethod4);
}
Function callBackFortestMethod4(data){
//其中date接收方法的返回值
//对于JavaBean返回值，有两种方式处理
//不知道属性名称时，使用如下方法
for(var property in data){
alert("property（属性名）:"+property);
alert(property（对应的属性值）+":"+data[property]);
}
//知道属性名称时，使用如下方法
alert(data.username);
alert(data.password);
}
其中callBackFortestMethod4是接收返回值的回调函数

 

AF
5、调用有JavaBean参数的java方法
5.1、dwr.xml的配置
配置同4.1
<dwr>
<allow>
<create creator="new" javascript="testClass" >
<param name="class" value="com.dwr.TestClass" />
<include method="testMethod5"/>
</create>
<convert converter="bean" match="com.dwr.TestBean">
<param name="include" value="username,password" />
</convert>
</allow>
</dwr>
5.2、javascript中调用
首先，引入javascript脚本
其次，编写调用java方法的javascript函数
Function callTestMethod5(){
//定义要传到java方法中的参数
var data;
//构造参数，date实际上是一个object
data = { username:"user", password:"password" }
testClass.testMethod5(data);
}

 

AG
6、调用返回List、Set或者Map的java方法
6.1、dwr.xml的配置
配置同4.1
<dwr>
<allow>
<create creator="new" javascript="testClass" >
<param name="class" value="com.dwr.TestClass" />
<include method="testMethod6"/>
</create>
<convert converter="bean" match="com.dwr.TestBean">
<param name="include" value="username,password" />
</convert>
</allow>
</dwr>
注意：如果List、Set或者Map中的元素均为简单类型（包括其封装类Double，Float等）或String、Date、数组和集合类型，则不需要<convert>标签。
6.2、javascript中调用(以返回List为例，List的元素为TestBean)
首先，引入javascript脚本
其次，编写调用java方法的javascript函数和接收返回值的回调函数
Function callTestMethod6(){
testClass.testMethod6(callBackFortestMethod6);
}
Function callBackFortestMethod6(data){
//其中date接收方法的返回值
//对于JavaBean返回值，有两种方式处理
//不知道属性名称时，使用如下方法
for(var i=0;i<data.length;i++){
for(var property in data){
alert("property:"+property);
alert(property+":"+data[property]);
}
}
//知道属性名称时，使用如下方法
for(var i=0;i<data.length;i++){
alert(data.username);
alert(data.password);
}
}
----------------------------------------------------------------------
如果java方法的返回值为Map，则在接收该返回值的javascript回调函数中如下处理：
function callBackFortestMethod(data){
//其中date接收方法的返回值
for(var property in data){
var bean = data[property];
alert(bean.username);
alert(bean.password);
}

AH
7、调用有List、Set或者Map参数的java方法
7.1、dwr.xml的配置
<dwr>
<allow>
<create creator="new" javascript="testClass" >
<param name="class" value="com.dwr.TestClass" />
<include method="testMethod7"/>
</create>
<convert converter="bean" match="com.dwr.TestBean">
<param name="include" value="username,password" />
</convert>
</allow>
<signatures>
<![CDATA[
import java.util.List;
import com.dwr.TestClass;
import com.dwr.TestBean;
TestClass.testMethod7(List<TestBean>);
]]>
</signatures>
</dwr>
<signatures>标签是用来声明java方法中List、Set或者Map参数所包含的确切类，以便java代码作出判断。
7.2、javascript中调用(以返回List为例，List的元素为TestBean)
首先，引入javascript脚本
其次，编写调用java方法的javascript函数
Function callTestMethod7(){
//定义要传到java方法中的参数
var data;
//构造参数，date实际上是一个object数组，即数组的每个元素均为object
data = [
{
username:"user1",
password:"password2"
},
{
username:"user2",
password:" password2"
}
];
testClass.testMethod7(data);
}
------------------------------------------------------------------
如果java的方法的参数为Map（假设其key为String，value为TestBean），则在调用该方法的javascript函数中用如下方法构造要传递的参数：
function callTestMethod (){
//定义要传到java方法中的参数
var data;
//构造参数，date实际上是一个object，其属性名为Map的key，属性值为Map的value
data = {
"key1":{
username:"user1",
password:"password2"
},
"key2":{
username:"user2",
password:" password2"
}
};
testClass.testMethod(data);
}
并且在dwr.xml中增加如下的配置段
<signatures>
<![CDATA[
import java.util.Map;
import com.dwr.TestClass;
import com.dwr.TestBean;
TestClass.testMethod7(Map<String,TestBean>);
]]>
</signatures>

说明：
对于java方法的返回值为List(Set)的情况，DWR将其转化为Object数组，传递给javascript；对于java方法的返回值为Map的情况，DWR将其转化为一个Object，其中Object的属性为原Map的key值，属性值为原Map相应的value值。

 

 

dwr3实现消息精确推送详细步骤
    这几天做项目，需要一个消息提醒功能，决定用dwr实现，在dwr官网和网上找了很多资料，也没实现精准推送，大多数的例子具体步骤写的不清楚，不怎么了解dwr的人看了也未必能看懂，反正我是没看懂，那时就决定，若自己实现了，一定将具体步骤写下来，希望能给那些和我一样的人一些帮助，若有不明白的，可以给小弟留言。我只写步骤，不写原理，下面开始。

     第一、在项目中引入dwr.jar，然后在web.xml中进行配置，配置如下：

     <servlet>

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

        <servlet-class>

            org.directwebremoting.servlet.DwrServlet

        </servlet-class>

        <init-param>

            <param-name>crossDomainSessionSecurity</param-name>

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

            </init-param>

        <init-param>

          <param-name>allowScriptTagRemoting</param-name>

          <param-value>true</param-value>

        </init-param>

        <init-param>

          <param-name>classes</param-name>

          <param-value>java.lang.Object</param-value>

        </init-param>

        <init-param>

            <param-name>activeReverseAjaxEnabled</param-name>

            <param-value>true</param-value>

        </init-param>

        <init-param>

           <param-name>initApplicationScopeCreatorsAtStartup</param-name>

           <param-value>true</param-value>

        </init-param>

        <init-param>

            <param-name>maxWaitAfterWrite</param-name>

            <param-value>3000</param-value>

        </init-param>

        <init-param>

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

            <param-value>true</param-value>

        </init-param>

        <init-param>

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

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

        </init-param>

    </servlet>

    第二：在web.xml的同级目录下新建dwr.xml文件，内容如下

     <!DOCTYPE dwr PUBLIC

          "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"

          "http://getahead.org/dwr/dwr30.dtd">

     <dwr>

          <alow>

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

                 <param name="class" value="com.huatech.messageremind.service.MessagePush"/>

              </create>

          </alow>

     </dwr>

    这个是dwr的基本配置，MessagePush在页面的javascript中使用，com.huatech.messageremind.service.MessagePush实现了想要调用的方法，MessagePush我觉得就相当于java类中的一个映射，在javascript中使用MessagePush.java类中实现的方法，即可在dwr中调用。

    第三，要想使用dwr，还要在你想要推送的页面中引入script，

          <script type="text/javascript" src="<%=basepath%>dwr/engine.js"></script>

        <script type="text/javascript" src="<%=basepath%>dwr/util.js"></script>

        <script type="text/javascript" src="<%=basepath%>dwr/interface/MessagePush.js"></script>

          可以看见，也引入了dwr.xml中配置的javascript，engine.js和util.js是必须引入的。

 以上三点都是基本配置，没什么好说的，想使用dwr，就得这么做。

   第四，实现消息的精准推送

        消息推送简单，但是想实现精准推送就需要做一些别的操作了

        1 在任何一个用户登录的时候，都需要将其userId或者其他唯一性标识放入session中，我放的是userId，

          这里就以 userId为唯一性标识。

        2 在载入想推送的页面时，需要onload一个我在MessagePush类中实现的方法，当然了，需要使用dwr调用

          js的调用方法如下：

           function onPageLoad(){

             var userId = '${userinfo.humanid}';

             MessagePush.onPageLoad(userId);

          }

            <body onload="dwr.engine.setActiveReverseAjax(true);dwr.engine.setNotifyServerOnPageUnload(true);onPageLoad();> 在onload中的三个函数都是必须的，其中dwr.engine.setActiveReverseAjax(true);dwr.engine.setNotifyServerOnPageUnload(true);是dwr中的函数。

           MessagePush类中实现的方法如下：

           public void onPageLoad(String userId) {

              ScriptSession scriptSession = WebContextFactory.get().getScriptSession();

              scriptSession.setAttribute(userId, userId);

              DwrScriptSessionManagerUtil dwrScriptSessionManagerUtil = new DwrScriptSessionManagerUtil();

              try {

                     dwrScriptSessionManagerUtil.init();

              } catch (ServletException e) {

                     e.printStackTrace();

              }

       }

         大家注意到，onPageLoad方法中还有一个名为DwrScriptSessionManagerUtil的类，该类如下实现：

         public class DwrScriptSessionManagerUtil extends DwrServlet{

       private static final long serialVersionUID = -7504612622407420071L;

 

       public void init()

       throws ServletException {

 

 

              Container container = ServerContextFactory.get().getContainer();

 

              ScriptSessionManager manager = container

                            .getBean(ScriptSessionManager.class);

 

              ScriptSessionListener listener = new ScriptSessionListener() {

 

                     public void sessionCreated(ScriptSessionEvent ev) {

 

                            HttpSession session = WebContextFactory.get().getSession();

 

                            String userId =((User) session.getAttribute("userinfo")).getHumanid()+"";

                            System.out.println("a ScriptSession is created!");

                            ev.getSession().setAttribute("userId", userId);

 

                     }

 

                     public void sessionDestroyed(ScriptSessionEvent ev) {

                            System.out.println("a ScriptSession is distroyed");

                     }

 

              };

 

              manager.addScriptSessionListener(listener);

 

       }

 

}

第四步是最最重要的，为了第四步我研究了两天多，下面开始消息推送。

      第五、消息推送

            在你想要推送消息的时候，调用如下方法：

             public void sendMessageAuto(String userid,String message) {

              final String userId = userid ;

              final String autoMessage = message;

              Browser.withAllSessionsFiltered(new ScriptSessionFilter() {

                     public boolean match(ScriptSession session) {

                            if (session.getAttribute("userId") == null)

                                   return false;

                            else

                                   return (session.getAttribute("userId")).equals(userId);

                     }

              }, new Runnable(){

                     private ScriptBuffer script = new ScriptBuffer();

                     public void run() {

                            script.appendCall("showMessage", autoMessage);

                            Collection<ScriptSession> sessions = Browser

                            .getTargetSessions();

                            for (ScriptSession scriptSession : sessions) {

                                   scriptSession.addScript(script);

                            }

                     }

                    

              });

       }

         userid即为你想推给消息的人，message为你想推送的消息，大家注意到这里script.appendCall("showMessage", autoMessage);

         其中showMessage为在想推送的页面中的javascript方法，autoMessage是这个方法的参数，这样那个页面就能得到推送的内容了，至于如何展现，就看你的需要了。

 

        至此，一个dwr消息精准推送的步骤就写完了，其实很多东西都不难，只是我们不知道该怎么用而已。

 

DWR 3.0 上传文件

 

第一步：需要文件包，其实就是dwr 3.0中例子所需要的包， dwr.jar 、 commons-fileupload-1.2.jar 、 commons-io-1.3.1.jar 。

 

 

第二步：编辑web.xml，添加dwr-invoke

Xml代码   收藏代码
  1. <servlet>  
  2.     <display-name>DWR Sevlet</display-name>  
  3.     <servlet-name>dwr-invoker</servlet-name>  
  4.     <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>  
  5.     <init-param>  
  6.         <description>是否打开调试功能</description>  
  7.         <param-name>debug</param-name>  
  8.         <param-value>true</param-value>  
  9.     </init-param>  
  10.     <init-param>  
  11.         <description>日志级别有效值为： FATAL, ERROR, WARN (the default), INFO and DEBUG.</description>  
  12.         <param-name>logLevel</param-name>  
  13.         <param-value>DEBUG</param-value>  
  14.     </init-param>  
  15.     <init-param>  
  16.         <description>是否激活反向Ajax</description>  
  17.         <param-name>activeReverseAjaxEnabled</param-name>  
  18.         <param-value>true</param-value>  
  19.     </init-param>  
  20.     <init-param>    
  21.          <description>在WEB启动时是否创建范围为application的creator</description>    
  22.          <param-name>initApplicationScopeCreatorsAtStartup</param-name>    
  23.          <param-value>true</param-value>    
  24.     </init-param>    
  25.     <init-param>  
  26.         <description>在WEB启动时是否创建范围为application的creator</description>    
  27.         <param-name>preferDataUrlSchema</param-name>  
  28.         <param-value>false</param-value>  
  29.     </init-param>  
  30.         <load-on-startup>1</load-on-startup>    
  31.       
  32. </servlet>  
  33. <servlet-mapping>  
  34.     <servlet-name>dwr-invoker</servlet-name>  
  35.     <url-pattern>/dwr/*</url-pattern>  
  36. </servlet-mapping>  

 第三步：创建上传类FileUpload.java，编辑代码，内容如下：

Java代码   收藏代码
  1. package learn.dwr.upload_download;  
  2.   
  3. import java.awt.Color;  
  4. import java.awt.Font;  
  5. import java.awt.Graphics2D;  
  6. import java.awt.geom.AffineTransform;  
  7. import java.awt.image.AffineTransformOp;  
  8. import java.awt.image.BufferedImage;  
  9. import java.io.File;  
  10. import java.io.FileOutputStream;  
  11. import java.io.InputStream;  
  12. import org.directwebremoting.WebContext;  
  13. import org.directwebremoting.WebContextFactory;  
  14.   
  15. /** 
  16.  * title: 文件上传 
  17.  * @author Administrator 
  18.  * @时间 2009-11-22:上午11:40:22 
  19.  */  
  20. public class FileUpload {  
  21.   
  22.     /** 
  23.      * @param uploadImage 圖片文件流 
  24.      * @param uploadFile 需要用简单的文本文件，如：.txt文件，不然上传会出乱码 
  25.      * @param color 
  26.      * @return 
  27.      */  
  28.     public BufferedImage uploadFiles(BufferedImage uploadImage,  
  29.             String uploadFile, String color) {  
  30.         // uploadImage = scaleToSize(uploadImage);  
  31.         // uploadImage =grafitiTextOnImage(uploadImage, uploadFile, color);  
  32.         return uploadImage;  
  33.     }  
  34.   
  35.     /** 
  36.      * 文件上传时使用InputStream类进行接收，在DWR官方例中是使用String类接收简单内容 
  37.      *  
  38.      * @param uploadFile 
  39.      * @return 
  40.      */  
  41.     public String uploadFile(InputStream uploadFile, String filename)  
  42.             throws Exception {  
  43.         WebContext webContext = WebContextFactory.get();  
  44.         String realtivepath = webContext.getContextPath() + "/upload/";  
  45.         String saveurl = webContext.getHttpServletRequest().getSession()  
  46.                 .getServletContext().getRealPath("/upload");  
  47.         File file = new File(saveurl + "/" + filename);  
  48.         // if (!file.exists()) {  
  49.         // file.mkdirs();  
  50.         // }  
  51.         int available = uploadFile.available();  
  52.         byte[] b = new byte[available];  
  53.         FileOutputStream foutput = new FileOutputStream(file);  
  54.         uploadFile.read(b);  
  55.         foutput.write(b);  
  56.         foutput.flush();  
  57.         foutput.close();  
  58.         uploadFile.close();  
  59.         return realtivepath + filename;  
  60.     }  
  61.   
  62.     private BufferedImage scaleToSize(BufferedImage uploadImage) {  
  63.         AffineTransform atx = new AffineTransform();  
  64.         atx  
  65.                 .scale(200d / uploadImage.getWidth(), 200d / uploadImage  
  66.                         .getHeight());  
  67.         AffineTransformOp atfOp = new AffineTransformOp(atx,  
  68.                 AffineTransformOp.TYPE_BILINEAR);  
  69.         uploadImage = atfOp.filter(uploadImage, null);  
  70.         return uploadImage;  
  71.     }  
  72.   
  73.     private BufferedImage grafitiTextOnImage(BufferedImage uploadImage,  
  74.             String uploadFile, String color) {  
  75.         if (uploadFile.length() < 200) {  
  76.             uploadFile += uploadFile + " ";  
  77.         }  
  78.         Graphics2D g2d = uploadImage.createGraphics();  
  79.         for (int row = 0; row < 10; row++) {  
  80.             String output = "";  
  81.             if (uploadFile.length() > (row + 1) * 20) {  
  82.                 output += uploadFile.substring(row * 20, (row + 1) * 20);  
  83.             } else {  
  84.                 output = uploadFile.substring(row * 20);  
  85.             }  
  86.             g2d.setFont(new Font("SansSerif", Font.BOLD, 16));  
  87.             g2d.setColor(Color.blue);  
  88.             g2d.drawString(output, 5, (row + 1) * 20);  
  89.         }  
  90.         return uploadImage;  
  91.     }  
  92. }  

 第四步：添加到dwr.xml

Java代码   收藏代码
  1. <create creator="new">  
  2.     <param name="class" value="learn.dwr.upload_download.FileUpload" />  
  3. </create>  

 第五步：添加前台html代码

Html代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>二进制文件处理，文件上传</title>  
  6. <script type='text/javascript' src='/learnajax/dwr/interface/FileUpload.js'></script>  
  7. <script type='text/javascript' src='/learnajax/dwr/engine.js'></script>  
  8. <script type='text/javascript' src='/learnajax/dwr/util.js'></script>  
  9. <script type='text/javascript' >  
  10. function uploadFiles(){  
  11.     var uploadImage = dwr.util.getValue("uploadImage");  
  12.      FileUpload.uploadFiles(uploadImage, "", "", function(imageURL) {  
  13.         alert(imageURL);  
  14.         dwr.util.setValue('image', imageURL);  
  15.   });  
  16.   
  17. }  
  18. function uploadFile(){  
  19.     var uploadFile = dwr.util.getValue("uploadFile");  
  20.     //var uploadFile =document.getElementById("uploadFile").value;  
  21.     var uploadFileuploadFile_temp = uploadFile.value.replace("\\","/");  
  22.     var filenames = uploadFile.value.split("/");  
  23.     var filename = filenames[filenames.length-1];  
  24.     //var eextension = e[e.length-1];  
  25.     FileUpload.uploadFile(uploadFile,filename,function(data){  
  26.         var file_a= document.getElementById("file_a");  
  27.         file_a.href=data;  
  28.         file_a.innerHTML=data;  
  29.         document.getElementById("filediv").style.display="";  
  30.     });  
  31. }  
  32.       
  33. </script>  
  34. </head>  
  35.   
  36. <body>  
  37. <table border="1" cellpadding="3" width="50%">  
  38.     <tr>  
  39.         <td>Image</td>  
  40.         <td><input type="file" id="uploadImage" /></td>  
  41.         <td><input type="button" onclick="uploadFiles()" value="upload"/><div id="image.container">&nbsp;</div></td>  
  42.     </tr>  
  43.     <tr>  
  44.         <td>File</td>  
  45.         <td><input type="file" id="uploadFile" /></td>  
  46.         <td><input type="button" onclick="uploadFile()" value="upload"/><div id="file.container">&nbsp;</div></td>  
  47.     </tr>  
  48.     <tr>  
  49.         <td colspan="3"></td>  
  50.     </tr>  
  51. </table>  
  52. <img id="image" src="javascript:void(0);"/>  
  53. <div id="filediv" style="display:none;">  
  54. <a href="" id="file_a">上传的文件</a>  
  55. </div>  
  56. </body>  
  57. </html>  

 

添加进度条么，就需要用reverse ajax 进行配合使用了。

分享到：
| DWR中各种java方法的调用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics