Professional Documents
Culture Documents
Fileupload
ZK Spreadsheet
ZK Charts
ZK Pivottable
ZK Studio
ZK Calendar
ZK Spring
ZK JSP
ZATS Test
Demos
ZK Framework
ZK SpreadSheet
ZK Pivottable
ZK Charts
ZK Calendar
ZK Web Mail
ZK Sandbox
Real World Apps
Downloads
ZK Framework
ZK Spreadsheet
ZK Charts
ZK Pivottable
ZK Studio
ZK Calendar
ZK Spring
ZK JSP
ZATS Test
Why ZK
Top Reasons
Features
Why ZK EE
Who's Using
Case Studies
Testimonials
Community
Forum
Blog
Board
Request Features
Report Bugs
Documentation
ZK Framework
ZK Spreadsheet
ZK Charts
ZK Pivottable
ZK Studio
ZK Calendar
ZK Spring
ZK JSP
ZATS Test
Support
1 de 5 13/01/2017 12:58
ZK - ZK Component Reference/Essential Components/Fileupload - Do... https://www.zkoss.org/wiki/ZK_Component_Reference/Essential_Com...
Support Options
Partners
About Us
Contact Us
From Documentation
Contents
1 Fileupload
2 Employment/Purpose
2.1 Use as a Component
2.2 Invoke the Static Method: get
2.2.1 Event Thread Disabled
2.2.1.1 Specify the Callback Event Listener
2.2.1.2 Specify the Target Component
2.2.2 Event Thread Enabled
3 Example
4 Supported Events
5 Supported Children
6 Use Cases
7 Version History
Fileupload
Demonstration: File Upload (http://www.zkoss.org/zkdemo/file_handling/file_upload)
Java API: Fileupload
JavaScript API: Fileupload
Style Guide: N/A
Employment/Purpose
There are two ways to use Fileupload as a component to upload files, or invoke Fileupload.get() to open a dialog to upload files.
Use as a Component
Fileupload itself is a component. You can use it directly as follows.
<fileupload label="Upload">
<attribute name="onUpload">
org.zkoss.util.media.Media media = event.getMedia();
//then, you can process media here
</attribute>
</fileupload>
Fileupload is actually a button with upload=true. In other words, the above is equivalent to
2 de 5 13/01/2017 12:58
ZK - ZK Component Reference/Essential Components/Fileupload - Do... https://www.zkoss.org/wiki/ZK_Component_Reference/Essential_Com...
...
The behavior is a little bit different depending on if the event thread is enabled (default: it is disabled[1]).
When the event thread is disabled (default), the execution won't be suspended when Fileupload.get() is called. In other words, the returned
value is always null. To retrieve the uploaded files, the developer has to listen the onUpload event, which is sent when the uploading is
completed.
By default, the onUpload event is sent to all root components. For example, Div will, in the following example, receive the onUpload event
since it is the root component:
<div onUpload="processMedia(event.getMedias());">
<zscript deferred="true"><![CDATA[
import org.zkoss.util.media.Media;
[Since 6.5.3]
If you prefer the event being sent to the callback event listener, specify the event listener when invoke Fileupload.get().
For example:
<zk>
<vbox>
<button label="Upload">
<attribute name="onClick">
Fileupload.get(new EventListener(){
public void onEvent(UploadEvent event) {
org.zkoss.util.media.Media media = event.getMedia();
if (media instanceof org.zkoss.image.Image) {
org.zkoss.image.Image img = (org.zkoss.image.Image) media;
if (img.getWidth() > img.getHeight()){
if (img.getHeight() > 300) {
pics.setHeight("300px");
pics.setWidth(img.getWidth() * 300 / img.getHeight() + "px");
}
}
if (img.getHeight() > img.getWidth()){
if (img.getWidth() > 400) {
pics.setWidth("400px");
pics.setHeight(img.getHeight() * 400 / img.getWidth() + "px");
}
}
image.setContent(img);
} else {
Messagebox.show("Not an image: "+media, "Error", Messagebox.OK, Messagebox.ERROR);
}
}
})
</attribute>
3 de 5 13/01/2017 12:58
ZK - ZK Component Reference/Essential Components/Fileupload - Do... https://www.zkoss.org/wiki/ZK_Component_Reference/Essential_Com...
</button>
<image id="image" />
</vbox>
</zk>
[Since 5.0.2]
If you prefer the event being sent to a particular component, specify the component in the desktop's attribute called
org.zkoss.zul.Fileupload.target.
For example, we could have the button to receive the onUpload event as follows:
<zk>
<zscript deferred="true"><![CDATA[
import org.zkoss.util.media.Media;
Executions.getCurrent().getDesktop().setAttribute(
"org.zkoss.zul.Fileupload.target", uploadBtn);
If the event thread is enable, the uploaded file will be returned directly by Fileupload.get() and other static methods, such as:
<zk>
<button label="Upload">
<attribute name="onClick">{
org.zkoss.util.media.Media[] media = Fileupload.get(-1);
if (media != null) {
for (int i = 0; i < media.length; i++) {
if (media[i] instanceof org.zkoss.image.Image) {
org.zkoss.zul.Image image = new org.zkoss.zul.Image();
image.setContent(media[i]);
image.setParent(pics);
} else {
Messagebox.show("Not an image: "+media[i], "Error", Messagebox.OK, Messagebox.ERROR);
break; //not to show too many errors
}
}
}
}</attribute>
</button>
<vbox id="pics" />
</zk>
As shown, Fileupload.get(int) won't return until the end user uploads the files (and/or closes the dialog).
Example
Here is an example that uses Fileupload as a component:
Supported Events
Name Event Type
None None
4 de 5 13/01/2017 12:58
ZK - ZK Component Reference/Essential Components/Fileupload - Do... https://www.zkoss.org/wiki/ZK_Component_Reference/Essential_Com...
Supported Children
*NONE
Use Cases
Version Description Example Location
Version History
Last Update : 2013/5/8
Copyright Potix Corporation. This article is licensed under GNU Free Documentation License. (http://www.gnu.org/copyleft/fdl.html)
Page |
Discussion |
View source |
History
5 de 5 13/01/2017 12:58