2014-10-09 43 views
0

我必須使用HTML代碼段得到的Android/iOS設備的圖像與充分利用HTML輸入字段文件與vaadin

<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提交

我怎樣才能得到這張圖片?

回答

0

您需要編寫擴展FormPanel的自定義Vaadin組件。那不是很難,因爲它可能聲音,只是讓Vaadin插件創建爲您生成類,然後用下面的代碼

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(); 
    } 
    }); 
} 

} 

您還可以添加按鈕,而不是在文件上傳自己添加ChangeHandler的更換自動生成的GWT組件。

完成之後,您需要處理Connector中的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