基于Ajax技术实现文件上传带进度条

1.概述

在实际的Web应该开发或网站开发过程中，经常需要实现文件上传的功能。在文件上传过程中，经常需要用户进行长时间的等待，为了让用户及时了解上传进度，可以在上传文件的同时，显示文件的上传进度条。运行本实例，如图1所示，访问文件上传页面，单击“浏览”按钮选择要上传的文件，注意文件不能超过50MB，否则系统将给出错误提示。选择完要上传的文件后，单击“提交”按钮，将会上传文件并显示上传进度。

2.技术要点

主要是应用开源的Common-FileUpload组件来实现分段文件上传，从而实现在上传过程中，不断获取上传进度。下面对Common-FileUpload组件进行详细介绍。

Common-FileUpload组件时Apache组织下的jakarta-commons项目下的一个子项目，该组件可以方便地将multipart/form-data类型请求中的各种表单域解析出来。该组件需要另一个名为Common-IO的组件的支持。这两个组件包文件可以到http://commons.apache.org网站上进行下载。

（1）创建上传对象

在应该Common-FileUpload组件实现文件上传时，需要创建一个工厂对象，并根据该工厂对象创建一个新的文件上传对象，具体代码如下：

DiskFileItemFactory factory = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(factory); 

（2）解析上传请求

创建一个文件上传对象后，就可以应用该对象来解析上传请求，获取全部的表单项，可以通过文件上传对象的parseRequest()方法来实现。parseRequest()方法的语法结构如下：

public List parseRequest(HttpServletRequest request) throws FileUploadException 

（3）FileItem类

在Common-FileUpload组件中，无论是文件域还是普通表单域，都当成FileItem对象来处理。如果该对象的isFormField()方法返回值为true，则表示是一个普通表单域，否则为一个文件域。在实现文件上传时，可以通过FileItem类的getName()方法获得上传文件的文件名，通过getSize()方法获得上传文件的大小。

3.具体实现

（1）创建request.js文件，在该文件中编写Ajax请求方法。

（2）新建文件上传页index.jsp，在该页中添加用于获得上传文件信息的表单以及表单元素，并添加用于显示进度条的<div>标签和显示百分比的<span>标签，关键代码如下：

<form enctype="multipart/form-data" method="post" action="UpLoad?action=uploadFile">

请选择上传的文件：<input name="file" type="file" size="34">

注：文件大小请控制在50M以内。

<div id="progressBar" class="prog_border" align="left"><img src="images/progressBar.gif" width="0" height="13" id="imgProgress"></div><span id="progressPercent" style="width:40px;display:none">0%</span><input name="Submit" type="button" value="提交" onClick="deal(this.form)"><input name="Reset" type="reset" class="btn_grey" value="重置"></td></form>