基于浏览器的文件上传，特别是对于通过＜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多部分请求并且把文件上传 到服务器。我们要做的是扩展该库并且加入我们需要的"钩子"来监视已经处理了多少字节。

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

　　(二) UploadMultipartRequestWrapper类

　 　在UploadMultipartRequestWrapper类中，我们将初始化ServletFileUpload类，它负责分析我们的请求并且把 文件写到服务器上的缺省临时目录。ServletFileUpload实例针对在该请求中遇到的每一个字段创建一个FileItem实例（它们包含文件上 传和正常的表单元素）。之后，一个FileItem实例用于检索一个提交字段的属性，或者，在文件上传的情况下，检索一个到底层的临时文件的 InputStream。总之，UploadMultipartRequestWrapper负责分析该文件并且设置任何FileItem-它在该请求中 把文件上传描述为属性。然后，这些属性由JSF组件所进一步收集，而正常表单字段的行为保持不变。

　　默认情况下，通用 FileUpload库将使用DiskFileItems类的实例来处理文件上传。尽管DiskFileItem在处理整个临时文件业务时是很有用的，但 在准确监视该文件已经处理程度方面存在很少支持。自版本1.1以来，通用FileUpload库能够使开发者指定用于创建FileItem的工厂。我们将 使用ProgressMonitorFileItemFactory和ProgressMonitorFileItem类来重载缺省行为并监视文件上传过 程。

　　(三) ProgressMonitorFileItemFactory类

　 　ProgressMonitorFileItemFactory Content-Length头由浏览器设置并且假定它是被设置的上传文件的精确长度。这种确定文件长度的方法确实限制了你在每次请求中上传的文件-如果 有多个文件在该请求中被编码的话，不过这个值是不精确的。这是由于，浏览器仅仅发送一个Content-Length头，而不考虑上传的文件数目。

　 　除了创建ProgressMonitorFileItem实例之外，ProgressMonitorFileItemFactory还注册了一个 ProgressObserver实例，它将由ProgressMonitorFileItem来发送文件上传过程中的更新。我们所使用的 ProgressObserver的实现（SessionUpdatingProgressObserver）针对被提交字段的id把进度百分数设置到用 户的会话中。然后，这个值可以由JSF组件存取以便把更新发送给用户。
　　(四) ProgressMonitorFileItem类

　　ProgressMonitorFileItem把DiskFileItem的缺省OutputStream包装到一个BytesCountingOutputStream中，这可以在每次读取一定数目的字节后更新相关的ProgressObserver。

　　(五) 支持AJAX的JavaServer Faces（JSF）上传组件

　 　这个组件负责生成HTML文件上传标签，显示一个进度条以监视文件上传，并且生成一旦文件上传成功需要被显示的组件。使用JavaServer Faces实现这个组件的一个主要优点是，大多数复杂性被隐藏起来。开发人员只需要把组件标签添加到JSP，而后由组件负责所有的AJAX及相关的进度条 监控细节问题。下面的JSP代码片断用于把上传组件添加到页面上。

　　文件上传组件的value属性需要用一个拥有一个FileItem的属性绑定到一个bean上。组件只有在该文件被服务器成功收到时才显示。

　　三、 实现AJAX文件上传组件

　 　实质上，上载组件或者生成一个完整的自已，或者在一个AJAX请求的情况下，只生成部分XML以更新在页面上进度条的状态。为了防止 JavaServer Faces生成完整的组件树（这会带来不必要的负荷），我们还需要实现一个PhaseListener（PagePhaseListener）以取消该 faces的请求处理的其它部分-如果遇到一个AJAX请求的话。我在本文中略去了所有的关于标准配置（faces-config.xml和标签库）的讨 论，因为它们相当直接且已经在以前讨论过；而且这一切都包含在随同本文的源码中，你可以详细分析。

　　(一) AJAX文件上传组件生成器

　　该组件和标签类的实现比较简单。大量的逻辑被包含到生成器中，具体地说，它负责以下：

　　· 编码整个的上传组件（和完整的HTML文件上传标签）、文件被上传完成后要显示的组件，还有实现AJAX请求的客户端JavaScript代码。

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

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

　　(二) 编码整个上传组件

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

　　(三) 阶段一

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

图5.选择文件上传

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

　　(四) 阶段二

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

图6.上传文件到服务器

　　(五) 阶段三

　　最后，作为阶段三，一旦文件成功上传，需要被显示的组件即被生成，见图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响应发送回客户端。

　　五、 正常的译码行为

　　在正常的编译期间，文件上传生成器从请求属性中检索FileItem，正是在此处它被过滤器所设置，并且更新该组件的值绑定。然后，该会话中的进度被更新到100％，这样在页面上的JavaScript就可以把组件送入第3个阶段。

　　客户端JavaScript负责向服务器发出进度请求并通过不同阶段来移动组 件。为了简化处理所有的浏览器特定的XMLHttpRequest对象的问题，我选用了Matt Krause提供的AjaxRequest.js库。该库最大限度地减少我们需要编写的JavaScript代码的数量，同时可以使这个组件正常工作。也 许把这部分JavaScript代码打包为该组件的一部分，然后从PhaseListener生成它更好一些，但是，我已经通过定义一个到JSP页面上的 JavaScript库的链接来尽力使得它简单。

　　组件中的getProgressBarJavaScript方法被调用以生成 JavaScript。使JavaScript正常工作通常是实现AJAX组件最困难的部分；不过我想，下面的代码已经非常清晰易于理解了。尽管在我的示 例中JavaScript是嵌入到Java代码中的，但是把它放到一个外部独立的文件中也许更好一些。在本文中，我只是想使问题更为简单些且只关心本文的 主题。下面是一个将由组件生成的JavaScript的示例。其中假定，fileUpload1是被赋值到该文件组件的客户端JSF Id，而uploadForm是HTML表单的Id。

　　六、 结论

　 　我很希望，本文能够在有关如何使得文件上传更具有用户友好性，并且把AJAX和JavaServer Faces用于实现高级用户接口组件的可能性方面引发你的进一步思考。毫无疑问，本文中的方案比较冗长并且有可能得到进一步的改进。我希望你能详细地分析 一下本文中所提供的完整的源代码来深入理解本文中所讨论的概念。