使用 vaadin 从 html 输入字段获取文件答案

【问题标题】：Getting a file from html input field with vaadin使用 vaadin 从 html 输入字段获取文件
【发布时间】：2014-10-09 16:00:27
【问题描述】：

我必须使用 HTML sn-p 从 Android/iOS 设备获取图像

<input type="file" accept="image/*" capture="camera" />

在标签中显示：

Label label = new Label("<input type=\"file\" accept=\"image/*\" capture=\"camera\" />");
label.setContentMode(Label.CONTENT_XHTML);

因为我在 Liferay 上使用 Vaadin，我不确定如何获取图像，因为没有 POST 提交

我怎样才能得到这张图片？

【问题讨论】：

标签： html liferay vaadin

【解决方案1】：

您需要编写扩展 FormPanel 的自定义 Vaadin 组件。听起来并不难，只需让 Vaadin Widget creator 为您生成类，然后将自动生成的 GWT 组件替换为以下代码

public class CameraCaptureWidget extends FormPanel {
public CameraCaptureWidget() {

    setEncoding(FormPanel.ENCODING_MULTIPART);
    setMethod(FormPanel.METHOD_POST);


    FileUpload f = new FileUpload();
    this.add(f);
    f.getElement().setAttribute("accept", "image/*");
    f.getElement().setAttribute("capture", "camera");
    f.addChangeHandler(new ChangeHandler(){
    @Override
    public void onChange(ChangeEvent event)
    {
        submit();
    }
    });
}

}

您也可以添加按钮而不是在 FileUpload 本身上添加 ChangeHandler。

完成后，您需要在连接器中处理 submit() 事件。示例：

    public CameraCaptureConnector() {

    getWidget().addSubmitHandler(new SubmitHandler()
    {

        @Override
        public void onSubmit(SubmitEvent event)
        {
            Window.alert("Hello world");
        }
    });

}

您可能还需要删除一些不必要的自动生成方法。

此解决方案在 DOM 中生成此 HTML 代码：

<input capture="camera" accept="image/*" class="gwt-FileUpload" type="file">

如果您遇到问题，请确保您已阅读https://vaadin.com/wiki/-/wiki/Main/Creating+a+simple+component

【讨论】：