上傳與下載也是非常常用的功能，自己實作 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);'/>