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);
}
}
运行应用程序,显示结果如下:
热门文章
优秀文章