您现在的位置:主页 > 网站制作 > AJAX教程 >

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

来源:建站吧 责任编辑:Jzq8 发表时间:2011-12-08 点击:

  一、 引言

  基于浏览器的文件上传,特别是对于通过<input type="file">标签包含到Web页面来实现上传的情况,还存在较严重的性能问题。我们知道,超过10MB的上传文件经常导致一种非常痛苦的用户体验。一旦用户提交了文件,在浏览器把文件上传到服务器的过程中,界面看上去似乎处于静止状态。由于这一切发生在后台,所以许多没有耐心的用户开始认为服务器"挂"了,因而再次提交文件,这当然使得情况变得更糟糕。

  为了尽可能使得文件上传感觉更友好些,一旦用户提交文件,许多站点将显示一个中间过程动画(例如一旋转图标)。尽管这一技术在上传提交到服务器时起一些作用,但它还是提供了太少的有关文件上传状态的信息。解决这个问题的另外一种尝试是实现一个applet——它通过FTP把文件上传到服务器。这一方案的缺点是:限制了你的用户,必须要有一个支持Java的浏览器。

  在本文中,我们将实现一个具有AJAX能力的组件——它不仅实现把文件上传到服务器,而且"实时地"监视文件上传的实际过程。这个组件工作的四个阶段显示于下面的图1,2,3和4中:

 


图1.阶段1:选择文件上传

图2.阶段2:上传该文件到服务器

图3.阶段3:上传完成

图4.阶段4:文件上传摘要

  二、 实现该组件

  首先,我们分析创建多部分过滤的过程,它将允许我们处理并且监视文件上传。然后,我们将继续实现JavaServer Faces(JSF)组件-它将提供给用户连续的回馈,以支持AJAX的进度条方式。

  (一) 多部分过滤:UploadMultipartFilter

  多部分过滤的任务是拦截到来的文件上传并且把该文件写到一个服务器上的临时目录中。同时,它还将监视接收的字节数并且确定已经上载该文件的程度。幸运的是,现在有一个优秀的Jakarta-Commons开源库可以利用(FileUpload),可以由它来负责分析一个HTTP多部分请求并且把文件上传到服务器。我们要做的是扩展该库并且加入我们需要的"钩子"来监视已经处理了多少字节。

 

public class UploadMultipartFilter implements Filter{
 public void doFilter(ServletRequest request,ServletResponse response,FilterChain chain)
 throws IOException, ServletException {
  HttpServletRequest hRequest = (HttpServletRequest)request;
  //检查是否我们在处理一个多部分请求
  String contentHeader = hRequest.getHeader("content-type");
  boolean isMultipart = ( contentHeader != null && contentHeader.indexOf("multipart/form-data") != -1);
  if(isMultipart == false){
   chain.doFilter(request,response);
  }else{
   UploadMultipartRequestWrapper wrapper = new UploadMultipartRequestWrapper(hRequest);
   chain.doFilter(wrapper,response);
  }
  ...
 }

  正如你所见,UploadMultipartFilter类简单地检查了当前的请求是否是一个多部分请求。如果该请求不包含文件上传,该请求将被传递到请求链中的下一个过滤,而不进行任何另外的处理。否则,该请求将被包装在一个UploadMultipartRequestWrapper中。

  (二) UploadMultipartRequestWrapper类

 

public class UploadMultipartRequestWrapper
extends HttpServletRequestWrapper{
 private Map<String,String> formParameters;
 private Map<String,FileItem> fileParameters;
 public UploadMultipartRequestWrapper(HttpServletRequest request) {
  super(request);
  try{
   ServletFileUpload upload = new ServletFileUpload();
   upload.setFileItemFactory(new ProgressMonitorFileItemFactory(request));
   List fileItems = upload.parseRequest(request);
   formParameters = new HashMap<String,String>();
   fileParameters = new HashMap<String,FileItem>();
   for(int i=0;i<fileItems.size();i ){
    FileItem item = (FileItem)fileItems.get(i);
    if(item.isFormField() == true){
     formParameters.put(item.getFieldName(),item.getString());
    }else{
     fileParameters.put(item.getFieldName(),item);
     request.setAttribute(item.getFieldName(),item);
    }
   }
   }catch(FileUploadException fe){
    //请求时间超过-用户可能已经转到另一个页面。
    //作一些记录
    //...
   }
   ...
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片

推荐图文

  • 在ASP.NET中使用AJAX的简单方法
  • 利用PHP+JavaScript打造AJAX搜索
  • jQuery实现网页精美幻灯片特效的21个实例
  • 建站吧收集10个优秀的jQuery幻灯片教程
  • 动态网站导航菜单:Javascript和jQuery导航菜单教程
  • 建站吧分享非常棒的国外的jQuery教程
  • AJAX JSF组件实现高性能的文件上载
Alexa - 客户服务 - 联系方法 - 招聘信息 - 友情链接 - 网站地图 - TAG标签 - RSS订阅
Copyright © 2010-2012 JZQ8.COM. 建站吧|建站去吧 版权所有
冀ICP备09002514号
冀ICP备09002514号 网络报警 企业法人营业执照 中国互联网协会 支付宝付款 网银在线付款