Question

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)行运行）。能否请您帮助我理解此代码示例中的错误/缺失？

提前谢谢。

P.S。我知道我必须将它放在FormPanel上，我知道如何在Servlet中执行实际的提交/处理;我唯一想做的就是这种装饰。

Answer 1

由于我没有收到任何答案，我不得不对此问题进行更多调查，因此我对gwtupload项目进行了更深入的代码分析，以便了解GWT FileUpload（转化为）的方式如何装饰。

事实证明，element.click()仅适用于支持#click（）方法（IE，Chrome，Safari）的浏览器。实际上，ManuelCarrascoMoñino--项目作者 - 在评论中提及它。还有第二种方法（对于Firefox和Opera），当FileInput放置在透明面板上时使用hack，但是它放在一些装饰按钮上（使用绝对定位）; Manuel的评论：

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

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

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

例如我在我的问题中提到，几乎没有修复（“上传”必须添加到容器中，并且可以设置为#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);
    }
}

此示例在IE8中正常工作。

P.S。感谢曼努埃尔的伟大图书馆：）

包装/装饰GWT FileUpload

1 个答案: