2

GWT FileUpload 是作为一个小部件出现的，它可以在表单提交期间上传文件（至少我是这么理解的:)）我想要做的是让它看起来更好看并摆脱标准的“浏览。 ..“ 按钮。

由于我没有良好的 GWT 经验（也没有 JavaScript），因此我寻找现有的解决方案并找到了一个相当不错的项目 - gwtupload。这很好，但我意识到我很想拥有自己的微型版本（而且，我很好奇它是如何工作的）。所以我浏览了代码并试图提取神奇的部分。我意识到使用了 GWT FileInput，但它没有显示，并且按钮点击被委托给这个 FileInput。在查看gwtupload的源代码后，我尝试提取的代码（仅代表单击的部分）包含这个棘手的elem.click()JSNI：

class MyUpload extends Composite {
    private static native void clickOnInputFile(Element elem) /*-{
        elem.click();
    }-*/;

    public MyUpload() {
        final FileUpload upload = new FileUpload();
        AbsolutePanel container = new AbsolutePanel();
        // container.add(upload);
        Button btn = new Button("My Browse..");
        btn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                clickOnInputFile(upload.getElement());
            }
        });
        container.add(btn);
        initWidget(container);
    }
}

但这似乎不起作用：单击“我的浏览..”没有任何效果（以防万一我也尝试使用未注释的container.add(upload)行运行）。您能否帮助我理解此代码示例中的错误/缺失？

先感谢您。

PS我知道我必须把它放在FormPanel上，我知道其余的关于如何在Servlet中执行实际的提交/处理；我唯一想做的就是这种装饰。

4

1 回答 1

9

由于我没有收到任何答案，我不得不对这个问题进行更多的调查，所以我对gwtupload项目进行了更深入的代码分析，以了解如何修饰 GWT FileUpload（转换为 ）。

事实证明，element.click()这只适用于支持#click() 方法的浏览器（IE、Chrome、Safari）。实际上，项目作者 Manuel Carrasco Moñino 在评论中提到了它。当 FileInput 放置在透明面板上时，第二种方法（用于 Firefox 和 Opera）使用 hack，但是放置在一些装饰按钮上（使用绝对定位）；曼努埃尔评论：

当用户将鼠标放在按钮上并单击它时，真正发生的是用户单击显示选择文件对话框的透明文件输入。

之后，主要工作是正确地将样式属性应用于元素。

因此，自定义文件上传组件有两种实现，GWT延迟绑定用于根据浏览器实例化它们。

As for example I mention in my question, there're few fixes ("upload" has to be added to to the container, and it can be set to #setVisible(false)):

class MyUpload extends Composite {
    private static native void clickOnInputFile(Element elem) /*-{
        elem.click();
    }-*/;

    public MyUpload() {
        final FileUploadWithMouseEvents upload = new FileUploadWithMouseEvents();
        AbsolutePanel container = new AbsolutePanel();
        container.add(upload);
        upload.setVisible(false);
        Button btn = new Button("My Browse..");
        btn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                clickOnInputFile(upload.getElement());
            }
        });
        container.add(btn);
        initWidget(container);
    }
}

This example works fine in IE8.

P.S. Thanks to Manuel for his great library :)

于 2011-02-02T12:24:34.560 回答