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

系统 1628 0
一、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值。

 

 

      这几天做项目,需要一个消息提醒功能,决定用 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  

 

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

 

第二步:编辑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  uploadFile uploadFile_temp  = uploadFile.value.replace("\\","/");  
  22.     var  filenames  =  uploadFile .value.split("/");  
  23.     var  filename  =  filenames [filenames.length-1];  
  24.     //var  e extension  = 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方法的调用总结


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论