AJAX JSF组件实现高性能的文件上载(3)

　　· 适当地处理部分AJAX请求并且发送回必要的XML。

　　· 解码一个文件上传并且把它设置为一个FileItem实例。

　　(二) 编码整个上传组件

　　前面已经提及，文件上传组件由三个阶段组成。在该组件的整个编码期间，我们将详细分析这三个阶段的编码。注意，在页面上的该组件的可视化（使用CSS显示）属性将由AJAX JavaScript来控制。

　　(三) 阶段一

　　图5显示了该上传组件的第一个阶段。


图5.选择文件上传

　　在第一阶段中，我们需要生成HTML文件Upload标签和点击Upload按钮时相应的执行代码。一旦用户点击了Upload按钮，表单将被一个IFRAME（为防止页面阻塞）提交并初始化第二个阶段。下面是生成代码的一部分：

//文件上传组件
writer.startElement("input"， component);
writer.writeAttribute("type"， "file"， null);
writer.writeAttribute("name"， component.getClientId(context)， "id");
writer.writeAttribute("id"， component.getClientId(context)，"id");
if(input.getValue() != null){
　//如果可用，则生成该文件名.
　FileItem fileData = (FileItem)input.getValue();
　writer.writeAttribute("value"， fileData.getName()， fileData.getName());
}
writer.endElement("input");
String iconURL = input.getUploadIcon();
//生成图像，并把JavaScript事件依附到其上.
writer.startElement("div"， component);
writer.writeAttribute("style"，"display:block;width:100%;text-align:center;"， "style");
writer.startElement("img"， component);
writer.writeAttribute("src"，iconURL，"src");
writer.writeAttribute("type"，"image"，"type");
writer.writeAttribute("style"，"cursor:hand;cursor:pointer;"，"style");
UIForm form = FacesUtils.getForm(context，component);
if(form != null) {
　String getFormJS = "document.getElementById('" form.getClientId(context) "')";
　String jsFriendlyClientID = input.getClientId(context).replace(":"，"_");
　//设置表单的编码为multipart以用于文件上传，并且通过一个IFRAME
　//来提交它的内容。该组件的第二个阶段也在500毫秒后被初始化.
　writer.writeAttribute("onclick"，getFormJS ".encoding='multipart/form-data';"
getFormJS ".target='" iframeName "';" getFormJS ".submit();"
getFormJS ".encoding='application/x-www-form-urlencoded';"
getFormJS ".target='_self';"
"setTimeout('refreshProgress" jsFriendlyClientID "();'，500);"，null);
}
...
writer.endElement("img");
//现在实现我们将要把该文件/表单提交到的IFRAME.
writer.startElement("iframe"， component);
writer.writeAttribute("id"， iframeName， null);
writer.writeAttribute("name"，iframeName，null);
writer.writeAttribute("style"，"display:none;"，null);
writer.endElement("iframe");
writer.endElement("div");
writer.endElement("div"); //阶段1结束
　　(四) 阶段二

　　第二阶段是显示当前百分比的进度条和标签，如图6所示。该进度条是作为一个具有100个内嵌span标签的div标签实现的。这些将由AJAX JavaScript根据来自于服务器的响应进行设置。


图6.上传文件到服务器
writer.startElement("div"，component);
writer.writeAttribute("id"， input.getClientId(context) "_stage2"， "id");
...
writer.writeAttribute("style"，"display:none"， "style");
String progressBarID = component.getClientId(context) "_progressBar";
String progressBarLabelID = component.getClientId(context) "_progressBarlabel";
writer.startElement("div"， component);
writer.writeAttribute("id"，progressBarID，"id");
String progressBarStyleClass = input.getProgressBarStyleClass();
if(progressBarStyleClass != null)
writer.writeAttribute("class"，progressBarStyleClass，"class");
for(int i=0;i＜100;i ){
　writer.write("＜span＞ ＜/span＞");
}
writer.endElement("div");
writer.startElement("div"，component);
writer.writeAttribute("id"，progressBarLabelID，"id");
...
writer.endElement("div");
writer.endElement("div"); //阶段2结束
　　(五) 阶段三

　　最后，作为阶段三，一旦文件成功上传，需要被显示的组件即被生成，见图7。这些是在生成器的encodeChildren方法中实现的。


图7.上传完成
public void encodeChildren(FacesContext context，
UIComponent component) throws IOException {
　ResponseWriter writer = context.getResponseWriter();
　UIFileUpload input = (UIFileUpload)component;
　//一旦文件上传成功，处理将被显示的子结点
　writer.startElement("div"， component);
　writer.writeAttribute("id"， input.getClientId(context) "_stage3"， "id"); //阶段3.
　if(input.getValue() == null){
　　writer.writeAttribute("style"，"display:none;"，null);
　}else{
　　writer.writeAttribute("style"，"display:block"，null);
　}
　List＜UIComponent＞ children = input.getChildren();
　for(UIComponent child : children){
　　FacesUtils.encodeRecursive(context，child);
　}
　writer.endElement("div"); //阶段3结束
}

　　四、处理AJAX请求

　　AJAX请求的生成是在这个组件的解码方法中处理的。我们需要检查这是否是一个实际的AJAX请求（为了区别于正常的编译行为），然后基于由ProgressMonitorFileItemFactory类的SessionUpdatingProgressObserver实例设置在会话中的值把一个XML响应发送回客户端。

public void decode(FacesContext context， UIComponent component) {

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有