GWT FileUpload组件

GWT FileUpload组件 介绍

FileUpload组件包装了HTML的<input type = 'file'>元素。如果要提交到服务器,此小部件必须与 FormPanel 一起使用。

GWT FileUpload组件 声明

以下是com.google.gwt.user.client.ui.FileUpload类的声明

public class FileUpload 
   extends Widget
      implements HasName, HasChangeHandlers

CSS 样式规则

以下默认 CSS 样式规则将应用于所有FileUpload标签。您可以根据您的要求覆盖它。

.gwt-FileUpload {}

GWT FileUpload组件 构造方法

构造方法 描述
FileUpload() 构造一个新的文件上传小部件。
FileUpload(Element element) 子类可以使用此构造函数来显式使用现有元素。

GWT FileUpload组件 方法

方法 描述
HandlerRegistration addChangeHandler(ChangeHandler handler) 添加 ChangeEvent 处理程序。
java.lang.String getFilename() 获取用户选择的文件名。
java.lang.String getName() 获取小部件的名称。
boolean isEnabled() 获取此小部件是否已启用。
void onBrowserEvent(Event event) 每当接收到浏览器事件时触发。
void setEnabled(boolean enabled) 设置是否启用此小部件。
void setName(java.lang.String name) 设置小部件的名称。
static FileUpload wrap(Element element) 创建一个包含现有 <input type='file'> 元素的 FileUpload 小部件。

GWT FileUpload组件 示例

1)修改HelloWorld.gwt.xml

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.0//EN"
        "http://gwtproject.org/doctype/2.8.0/gwt-module.dtd">
<module rename-to="HelloWorld">

    <!-- Inherit the core Web Toolkit stuff.                  -->
    <inherits name='com.google.gwt.user.User'/>

    <!-- Specify the app entry point class.                   -->
    <entry-point class='com.yiidian.helloWorld.client.HelloWorld'/>


    <!-- Specify the app servlets.                   -->
    <servlet path='/HelloWorldService' class='com.yiidian.helloWorld.server.HelloWorldServiceImpl'/>

    <source path = 'client'/>
    <source path = 'shared'/>
</module>

2)修改HelloWorld.css

body {
    text-align: center;
    font-family: verdana, sans-serif;
}

h1 {
    font-size: 2em;
    font-weight: bold;
    color: #777777;
    margin: 40px 0px 70px;
    text-align: center;
}

.gwt-FileUpload {
    color: green;
}

3)修改HelloWorld.html

<html>
<head>
    <title>yiidian.com-GWT Hello World</title>
    <link type="text/css" rel="stylesheet" href="HelloWorld.css">
    <script type="text/javascript" language="javascript" src="HelloWorld/HelloWorld.nocache.js"></script>
</head>
<body>
<h1>FileUpload Widget Demonstration</h1>
<div id = "gwtContainer"></div>
</body>
</html>

4)HelloWorld.java

package com.yiidian.helloWorld.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.*;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.DOM;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.ClickEvent;

/**
 * Entry point classes define <code>onModuleLoad()</code>
 */
public class HelloWorld implements EntryPoint {
    public void onModuleLoad() {
        VerticalPanel panel = new VerticalPanel();
        //create a FormPanel
        final FormPanel form = new FormPanel();
        //create a file upload widget
        final FileUpload fileUpload = new FileUpload();
        //create labels
        Label selectLabel = new Label("Select a file:");
        //create upload button
        Button uploadButton = new Button("Upload File");
        //pass action to the form to point to service handling file
        //receiving operation.
        form.setAction("http://www.yiidian.com/gwt");
        // set form to use the POST method, and multipart MIME encoding.
        form.setEncoding(FormPanel.ENCODING_MULTIPART);
        form.setMethod(FormPanel.METHOD_POST);

        //add a label
        panel.add(selectLabel);
        //add fileUpload widget
        panel.add(fileUpload);
        //add a button to upload the file
        panel.add(uploadButton);
        uploadButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                //get the filename to be uploaded
                String filename = fileUpload.getFilename();
                if (filename.length() == 0) {
                    Window.alert("No File Specified!");
                } else {
                    //submit the form
                    form.submit();
                }
            }
        });

        form.addSubmitCompleteHandler(new FormPanel.SubmitCompleteHandler() {
            @Override
            public void onSubmitComplete(FormPanel.SubmitCompleteEvent event) {
                // When the form submission is successfully completed, this
                //event is fired. Assuming the service returned a response
                //of type text/html, we can get the result text here
                Window.alert(event.getResults());
            }
        });
        panel.setSpacing(10);

        // Add form to the root panel.
        form.add(panel);

        RootPanel.get("gwtContainer").add(form);
    }
}

运行应用程序,显示结果如下:

热门文章

优秀文章