[英]how to upload image directly from client side to server
I am using gwt web application. 我正在使用gwt Web应用程序。 I want to provide users, the functionality to print screen and press Ctrl+v , for which i have provided an image element in which image will be set on pressing Ctrl+V.
我想为用户提供打印屏幕并按Ctrl + v的功能,为此我提供了一个图像元素,在其中按Ctrl + V即可设置图像。 Now i want to upload that Image to server.
现在我想将该图像上传到服务器。 I do not want to use the Up loader which select files from File system and then upload the file.
我不想使用从文件系统中选择文件然后上传文件的Up loader。
First of all you need a servlet in Tomcat 首先,您需要在Tomcat中安装一个servlet
Then send the image to the servlet using FormData and XMLHTTPRequest2 然后使用FormData和XMLHTTPRequest2将图像发送到servlet
You need to getthe image from the DOM, and then do something like that: 您需要从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);
This is the FormData class 这是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();
}-*/;
}
And this is XMLHttpRequest2 class 这是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);
}-*/;
}
You can use something like this: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/ 您可以使用类似以下的内容: http : //strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/
You can get the file and then use a multipart/form-data request to upload it with a servlet as explained here http://hmkcode.com/java-servlet-jquery-file-upload/ . 您可以获取文件,然后使用multipart / form-data请求通过servlet上传该文件,如http://hmkcode.com/java-servlet-jquery-file-upload/所述 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.