如何将图像直接从客户端上传到服务器

时间:2013-11-01 11:54:14

标签: java gwt file-upload gwtupload

我正在使用gwt web应用程序。我想提供用户,打印屏幕的功能,然后按Ctrl + v,我已经提供了一个图像元素,按Ctrl + V将设置图像。现在我想将该图像上传到服务器。我不想使用从文件系统中选择文件的Up loader,然后上传文件。

2 个答案:

答案 0 :(得分:1)

首先,您需要servlet in Tomcat

然后使用FormDataXMLHTTPRequest2

将图像发送到servlet

你需要从DOM中获取图像,然后执行类似的操作:

String url = GWT.getHostPageBaseURL() + "UploadFileServlet?sid=" + AppHelper.remoteService.getSessionID();
XMLHTTPRequest2 xhr = (XMLHTTPRequest2) XMLHTTPRequest2.create();

xhr.open("POST", url);


FormData formData = FormData.create();
formData.append("file", imagedata);


xhr.setOnReadyStateChange(new ReadyStateChangeHandler()
{

    //@Override
    public void onReadyStateChange(XMLHttpRequest xhr)
    {
        /////Window.alert(" " + xhr.getStatus());

        // When the form submission is successfully completed, this event is
        // fired. Assuming the service returned a response of type text/html,
        // we can get the result text here (see the FormPanel documentation for
        // further explanation).
        //Window.alert(event.getResults());

        String result = xhr.getResponseText();

        if(result.equals("ok"))
        {
            Window.alert("File uploaded");

        }
        else
        {
            Window.alert(result);
        }
    }
});

xhr.send(formData);

这是FormData类

public class FormData extends JavaScriptObject {
  //default constructor
  //see more at http://dev.w3.org/2006/webapi/XMLHttpRequest-2/#formdata
  protected FormData() {

  }

  /**
   * add a pair of value to form.
   * <p>
   * See <a href="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/#formdata"
   * >http://dev.w3.org/2006/webapi/XMLHttpRequest-2/#formdata</a>.
   * 
   * @param name the name to be add
   * @param value the value to be add
   */
  public final native void append(String name, String value) /*-{
    this.append(name, value);
  }-*/;

  public final native void append(String name, JavaScriptObject value) /*-{
    this.append(name, value);
  }-*/;

  /**
   * Creates an XMLHttpRequest object.
   * 
   * @return the created object
   */
  public static native FormData create() /*-{
    return new FormData();
  }-*/;
}

这是XMLHttpRequest2类

public class XMLHTTPRequest2 extends XMLHttpRequest {

  /**
   * Constructor
   */
  protected XMLHTTPRequest2() {

  }

  /**
   * Initiates a request with data.  If there is no data, specify null.
   * <p>
   * See <a href="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/#dom-xmlhttprequest-send"
   * >http://dev.w3.org/2006/webapi/XMLHttpRequest-2/#dom-xmlhttprequest-send</a>.
   * 
   * @param requestData the data to be sent with the request
   */
  public final native <T> void send(T requestData) /*-{
    this.send(requestData);
  }-*/;
}

答案 1 :(得分:0)

您可以使用以下内容:http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

您可以获取该文件,然后使用multipart / form-data请求将其上传到servlet,如http://hmkcode.com/java-servlet-jquery-file-upload/所述。