上传与下载也是非常常用的功能，自己实作 ajax 处理也是挺麻烦的。ZK 提供简单的方式就可以启用。

上传元件

<dropupload> 是专用上传元件，可显示一个区域，让使用者将图片拖放至该区域之後，发出 onUpload 事件，我们再注册倾听器来处理上传档案。

范例：上传图片并显示

<image id="img" />
<dropupload maxsize="-1" content="拖放上传图片" detection="none" onUpload="img.setContent(event.media)" />

元件内建上传

以下几个元件内建上传功能，只要启动即可：

• <button>
• <toolbarbutton>
• <menuitem>

启动步骤如下：

1. 设定属性 upload="true"
2. 注册该元件的 onUpload 事件倾听器。
   其中要实作怎麽处理上传的档案

范例：上传图片并显示

<zscript>
    void upload(UploadEvent event) {
        org.zkoss.util.media.Media media = event.getMedia();
        if (media instanceof org.zkoss.image.Image) {
            org.zkoss.zul.Image image = new org.zkoss.zul.Image();
            image.setContent( (org.zkoss.image.Image) media);
            image.setParent(pics);
        } else {
            Messagebox.show("Not an image: "+media, "Error", Messagebox.OK, Messagebox.ERROR);
        }
    }
</zscript>
<button label="上传" upload="true" onUpload="upload(event)"/>
<vlayout id="pics"/>

• onUpload 事件倾听器的传入参数是 UploadEvent
• 用 java 新建元件的方式就是 new org.zkoss.zul.Image()
• 新建元件後要记得把元件加到页面上，否则是不会绘制在浏览器上的，其中一个方式就是 setParent()，也可以用其他如 setPage(), insertBefore(), appendChild()

设定上传选项

upload 属性可以设定额外的选项来控制上传行为，例如限制档案大小、是否允许一次上传多个档案、允许的档案类型等，详细请查看 Javadoc。

开启上传对话框

如果你想在上述所列元件以外的其他元件启用上传功能怎麽办呢？可以呼叫 API 来开启上传对话框，因此可以透过任何一个事件来触发上传功能。

图示开启上传

例如我可以放一个上传图示，当使用者点击就开启上传：

<a iconSclass="z-icon-upload" style="font-size: 32px; border: 2px solid; padding: 5px;"
   apply="quickstart.UploadComposer"/>

倾听器

@Listen(Events.ON_CLICK+ "= a")
public void handleUpload(MouseEvent e) {
    Fileupload.get(1, new EventListener<UploadEvent>() {
        public void onEvent(UploadEvent event) throws Exception {
            Media[] medias = event.getMedias();
            System.out.println("upload " +  medias[0].getName());
        }
    });
}

• Fileupload.get() 就会开启一个上传对话框，传入一个倾听器来处理 onUpload 事件

下载

下载直接呼叫 Filedownload.save() 即可，因为是从服务器端传资料，因此你甚至可以指定 /WEB-INF 下的目录：

<button label="下载" 
onClick='Filedownload.save("/WEB-INF/zklogo.png", null);'/>