GWT 工作原理

[img]http://dl.iteye.com/upload/attachment/266624/80b8698c-a86e-38e6-a5b5-50c775bfd230.jpg[/img]
[size=medium][color=darkred]How does it work.¶
The browser renders a form with a file input and a hidden iframe.
Once the user selects a file (automatically or pushing a submit button) the browser asks the server for a session cookie using an ajax request, and submits the form.
The server starts the reception and continuously updates a session object with the process information.
While the file is being uploaded, the browser asks periodically the server for the progress status using ajax. It is possible since most browsers can open two simultaneous connections to the same server.
The server responds with a simple xml document with the real information about the size of the file and the amount of data transferred, or with an error message.
The client parses the response, calculates percentage, speed, remaining time, and updates a progress bar widget with this information.
Finally when the form has been completely sent, the server response is written in the iframe, instead of the main document.
In the case of any error, the client shows a message to the user.
The client code executes customisable methods when the file input changes, the upload process starts and finishes.
It is possible to cancel the file while it is being transfered. Because of the impossibility to cancel an active upload in the client side, the browser sends an ajax request to the server, and the server closes the socket. [/color][/size]

[size=large]*文件上传编写*


1.GWT前台

[1]加入gwtupload.jar与commons-fileupload-1.2.jar以及commons-io-1.3.1.jar、 log4j.jar ；

[2]编辑***.gwt.xml文件，加入：
<inherits name="gwtupload.GWTUpload"/>
<stylesheet src="Upload.css"/>

[3]新建uploader对象：
MultiUploader defaultUploader = new MultiUploader();
defaultUploader.avoidRepeatFiles(true);设置避免重复文件上传
defaultUploader.setMaximumFiles(3); 设置上传文件最大数量
defaultUploader.setServletPath("a/a/a/a.upload"); 设置servletpath
Button submitButton = new Button("<B>上传</B>"); 按钮触发后台方法进行操作
submitButton.setWidth("70");
submitButton.addClickHandler(new com.google.gwt.event.dom.client.ClickHandler() {
public void onClick(com.google.gwt.event.dom.client.ClickEvent arg0) {
RequestBuilder rbBuilder = new RequestBuilder(RequestBuilder.GET, "后台方法访问路径");
try {
rbBuilder.sendRequest("", new RequestCallback() {
public void onResponseReceived(Request request, Response response) {
SC.say(response.getText());
}
public void onError(Request request, Throwable exception) {
}
});
} catch (RequestException e) {
e.printStackTrace();
}
}
});

2.Grails后台项目

grails install-plugin gisuploader 加入插件 ，配置后台上传处理servlet
加入gwtupload.jar与jxl.jar、commons-fileupload.jar
从session中取得FileItem类型的集合，对集合进行遍历，取得文件的输出流进行处理(存入数据库或硬盘)：
def files = (Vector<FileItem>)request.getSession().getAttribute("FILES");
for (FileItem item : files ) {
if (false == item.isFormField()) {
item.getOutputStream();
}
}


*上传明细文档*

# 新建MutiUploader，实例化Uploader，浏览器会渲染出一个form和隐藏的iframe
# 为生成的uploader对象注册onSubmitFormHander, setFileInput()设置文件上传框
# 为fileInput注册onFileInputChanged，来监控用户选择文件。
# 用户选择文件后，创建定时器automaticUploadTimer，将文件加入上传队列，并将文件状态设置为QUEUED，设置进度条为0
# 检测到文件队列中有文件，提交文件，激活onSubmitFormHander
# sendAjaxRequestToValidateSession()向服务器端发送Ajax检测session是否存在的请求，得到服务器端回应renderXmlResponse()后，正式提交上传文件。
# 进入后台接收请求dopost(),读取post请求parsePostRequest(),创建新的session，将读取到的文件项的集合放入session中，renderXmlResponse()返回客户端
# 设置客户端定时器updateStatusTimer定时通知IsUpdateable来更新status：为请求对象RequestBuilder注册onStatusReceivedCallback，
parseAjaxResponse(response.getText())连续定时读取服务器端监听器doget()的getUploadStatus()返回请求，读取xml文件具体内容Utils.getXmlNodeValue(),并根据返回数据设置进度条进度，
statusWidget.setProgress(transferredKB, totalKB)。
# 如此连续定时阶段上传，直至文件上传结束，uploadFinished()判断文件上传成功后，将上传状态更新为SUCCESS，关闭定时器。进度条隐藏，状态显示为DONE。
# 若在上传中途或结束后进行删除，则回调在statusWidget中注册的cancelHandler，进而调用uploader对象的cancel()方法，sendAjaxRequestToDeleteUploadedFile()向后台发送ajax删除请求，并将上传状态更新为DELETED。状态显示为DELETED。
# 若中途上传出错，则会调用cancelUpload()方法结束上传，并将上传状态更新为ERROR。状态显示为ERROR。[/size]