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

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

<servlet>
    <display-name>DWR Sevlet</display-name>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
    <init-param>
        <description>是否打开调试功能</description>
        <param-name>debug</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
        <description>日志级别有效值为： FATAL, ERROR, WARN (the default), INFO and DEBUG.</description>
        <param-name>logLevel</param-name>
        <param-value>DEBUG</param-value>
    </init-param>
    <init-param>
        <description>是否激活反向Ajax</description>
        <param-name>activeReverseAjaxEnabled</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
         <description>在WEB启动时是否创建范围为application的creator</description>
         <param-name>initApplicationScopeCreatorsAtStartup</param-name>
         <param-value>true</param-value>
    </init-param>
    <init-param>
        <description>在WEB启动时是否创建范围为application的creator</description>
        <param-name>preferDataUrlSchema</param-name>
        <param-value>false</param-value>
    </init-param>
        <load-on-startup>1</load-on-startup>

</servlet>
<servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

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

package learn.dwr.upload_download;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.geom.AffineTransform;
import java.awt.image.AffineTransformOp;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import org.directwebremoting.WebContext;
import org.directwebremoting.WebContextFactory;

/**
 * title: 文件上传
 * @author Administrator
 * @时间 2009-11-22:上午11:40:22
 */
public class FileUpload {

    /**
     * @param uploadImage 圖片文件流
     * @param uploadFile 需要用简单的文本文件，如：.txt文件，不然上传会出乱码
     * @param color
     * @return
     */
    public BufferedImage uploadFiles(BufferedImage uploadImage,
            String uploadFile, String color) {
        // uploadImage = scaleToSize(uploadImage);
        // uploadImage =grafitiTextOnImage(uploadImage, uploadFile, color);
        return uploadImage;
    }

    /**
     * 文件上传时使用InputStream类进行接收，在DWR官方例中是使用String类接收简单内容
     *
     * @param uploadFile
     * @return
     */
    public String uploadFile(InputStream uploadFile, String filename)
            throws Exception {
        WebContext webContext = WebContextFactory.get();
        String realtivepath = webContext.getContextPath() + "/upload/";
        String saveurl = webContext.getHttpServletRequest().getSession()
                .getServletContext().getRealPath("/upload");
        File file = new File(saveurl + "/" + filename);
        // if (!file.exists()) {
        // file.mkdirs();
        // }
        int available = uploadFile.available();
        byte[] b = new byte[available];
        FileOutputStream foutput = new FileOutputStream(file);
        uploadFile.read(b);
        foutput.write(b);
        foutput.flush();
        foutput.close();
        uploadFile.close();
        return realtivepath + filename;
    }

    private BufferedImage scaleToSize(BufferedImage uploadImage) {
        AffineTransform atx = new AffineTransform();
        atx
                .scale(200d / uploadImage.getWidth(), 200d / uploadImage
                        .getHeight());
        AffineTransformOp atfOp = new AffineTransformOp(atx,
                AffineTransformOp.TYPE_BILINEAR);
        uploadImage = atfOp.filter(uploadImage, null);
        return uploadImage;
    }

    private BufferedImage grafitiTextOnImage(BufferedImage uploadImage,
            String uploadFile, String color) {
        if (uploadFile.length() < 200) {
            uploadFile += uploadFile + " ";
        }
        Graphics2D g2d = uploadImage.createGraphics();
        for (int row = 0; row < 10; row++) {
            String output = "";
            if (uploadFile.length() > (row + 1) * 20) {
                output += uploadFile.substring(row * 20, (row + 1) * 20);
            } else {
                output = uploadFile.substring(row * 20);
            }
            g2d.setFont(new Font("SansSerif", Font.BOLD, 16));
            g2d.setColor(Color.blue);
            g2d.drawString(output, 5, (row + 1) * 20);
        }
        return uploadImage;
    }
}

 第四步：添加到dwr.xml

<create creator="new">
    <param name="class" value="learn.dwr.upload_download.FileUpload" />
</create>

 第五步：添加前台html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二进制文件处理，文件上传</title>
<script type='text/javascript' src='/learnajax/dwr/interface/FileUpload.js'></script>
<script type='text/javascript' src='/learnajax/dwr/engine.js'></script>
<script type='text/javascript' src='/learnajax/dwr/util.js'></script>
<script type='text/javascript' >
function uploadFiles(){
    var uploadImage = dwr.util.getValue("uploadImage");
     FileUpload.uploadFiles(uploadImage, "", "", function(imageURL) {
        alert(imageURL);
        dwr.util.setValue('image', imageURL);
  });

}
function uploadFile(){
    var uploadFile = dwr.util.getValue("uploadFile");
    //var uploadFile =document.getElementById("uploadFile").value;
    var uploadFileuploadFile_temp = uploadFile.value.replace("\\","/");
    var filenames = uploadFile.value.split("/");
    var filename = filenames[filenames.length-1];
    //var eextension = e[e.length-1];
    FileUpload.uploadFile(uploadFile,filename,function(data){
        var file_a= document.getElementById("file_a");
        file_a.href=data;
        file_a.innerHTML=data;
        document.getElementById("filediv").style.display="";
    });
}

</script>
</head>

<body>
<table border="1" cellpadding="3" width="50%">
    <tr>
        <td>Image</td>
        <td><input type="file" id="uploadImage" /></td>
        <td><input type="button" onclick="uploadFiles()" value="upload"/><div id="image.container">&nbsp;</div></td>
    </tr>
    <tr>
        <td>File</td>
        <td><input type="file" id="uploadFile" /></td>
        <td><input type="button" onclick="uploadFile()" value="upload"/><div id="file.container">&nbsp;</div></td>
    </tr>
    <tr>
        <td colspan="3"></td>
    </tr>
</table>
<img id="image" src="javascript:void(0);"/>
<div id="filediv" style="display:none;">
<a href="" id="file_a">上传的文件</a>
</div>
</body>
</html>

 

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