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

Question

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

Answer 1

首先你需要一个Tomcat 中的 servlet

然后使用FormData和XMLHTTPRequest2将图像发送到 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);
  }-*/;
}

Answer 2

你可以使用这样的东西：http ://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

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