Question

如何使用zk中的按钮上传图像并在浏览器上显示。我试过了，但上传的图片没有出现在浏览器上。请告诉我我的代码有什么问题：

这是zul文件：

<?xml version="1.0" encoding="UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<window id="win" use="simple.zkoss.project.WindowController">
    <hbox>
        <button id="uploadButton" label="Upload" upload="true" onUpload="win.uploadImage((UploadEvent) event)" />
        <div id="image" width="100px" height="100px" />
    </hbox>
</window>

和班级：

import org.zkoss.util.media.Media;
import org.zkoss.zk.ui.UiException;
import org.zkoss.zk.ui.event.UploadEvent;
import org.zkoss.zul.Div;
import org.zkoss.zul.Fileupload;
import org.zkoss.zul.Image;
import org.zkoss.zul.Messagebox;
import org.zkoss.zul.Window;

public class WindowController extends Window {

    private Div image;

    public void uploadImage(UploadEvent event) {

        Media media = event.getMedia();
        if (media instanceof org.zkoss.image.Image) {
            Image im = new Image();
            im.setContent((org.zkoss.image.Image) media);
            im.setParent(image);
        } else {
            Messagebox.show(media + " is not an image", "Error", Messagebox.OK, Messagebox.ERROR);
        }
    }

}

图像只是没有出现在'div'标签中，但是当我选择其他类型的文件（不是图像）时，它会显示消息框，这意味着条件是正确的。谢谢

Answer 1

Div图像为空。使用getFellow("image")检索它。

Answer 2

你需要在onUpload方法上添加注释@Listen（“onUpload =＃uploadButton”）

Answer 3

通过以下方式更改yor div：

<image id="idBtn"/>

和你的方法：

public void onUpload$idBtn(UploadEvent event) {
    Media media = event.getMedia();
    if (media instanceof org.zkoss.image.Image) {
        img_identificacion.setContent((org.zkoss.image.Image) media);
    }
}

ZK上传图片并显示它

3 个答案: