利用jsp+Extjs实现动态显示文件上传进度

我们来分析后台的实现方式。我们需要两个控制器组件：uploadController.jsp和processController.jsp。当用户在前端点击上传按钮后，表单数据会被提交到uploadController.jsp进行处理。这个控制器主要负责接收和处理上传的数据，它会动态地将进度信息存储到session中。而processController.jsp则是用来更新进度条的控制器，它会根据ajax请求获取进度信息并更新进度条的显示进度。这个过程是每秒重复一次的。

如何实现后台接收数据时知道接收的数据占总数据的多少这一问题呢？幸运的是，成熟的文件上传组件如apache mons fileupload已经为我们考虑到了这个问题。它预留了接口可以用来获取接收数据的百分比。在这个组件的帮助下，我们可以轻松地获取上传文件的进度信息。

接下来，让我们看一下uploadController.jsp的实现细节。我们需要导入必要的java库和apache mons fileupload组件的相关类。然后，我们创建一个FileItemFactory实例和一个ServletFileUpload实例。这些实例将用于处理文件上传和获取上传进度信息。值得注意的是，由于内部类无法直接引用request对象，我们需要将其传递到其他类中以实现文件上传和进度信息的处理。

在热闹的后台服务器中，一个名为`MyProgressListener`的类正在默默执行它的任务。它实现了`ProgressListener`接口，专注于监听上传进度的变化。每当有文件或表单项被上传时，它都会收到通知。这个类的核心成员是一个`HttpServletRequest`对象，它携带了关于当前请求的所有信息。

当上传开始时，构造函数`MyProgressListener(HttpServletRequest request)`被调用，将当前的请求传递给这个监听器。随着数据的读取和传输，`update`方法被频繁触发。在这个方法中，上传的进度被计算并保存到session中，以便后续的页面如`processController.jsp`能够使用。

接下来，上传过程正式启动。通过调用`upload.setProgressListener(new MyProgressListener(request))`，我们为上传设置了进度监听器。然后，使用`upload.parseRequest(request)`请求中的文件项和表单项。每一个文件项都被单独处理：文件名、大小以及是否存储在内存中的信息都被获取。接着，文件被写入到服务器上的指定目录，文件名被唯一化以确保不会覆盖旧文件。

当所有文件都处理完毕后，服务器向客户端发送一个成功的响应。这个响应包含了一个JSON格式的消息，表明文件已成功保存并正在分析Excel数据。此时的客户端可能会看到一个进度条或提示消息，显示“正在上传文件...”。

在服务器端的`processController.jsp`页面也在忙碌地工作。它首先从session中获取上传的进度百分比。如果进度未满1%，说明文件还在上传中，页面将显示一个提示消息以及当前的进度百分比，并告知用户上传尚未完成。而如果进度达到或超过1%，则表示上传已完成，接下来将开始处理和分析Excel数据。在这个阶段，服务器可能会在session中放置一个表示Excel处理进度的值，以便后续向用户反馈处理进度。

在处理Excel数据的幕后，我们正在默默耕耘。这是一场悄无声息的战斗，每一步进展都代表着数据处理的新阶段。每当您访问我们的系统，我们都会向您汇报的进度。

我们检查会话中是否已存在处理Excel的进度百分比。如果没有，我们会将其设定为初始值，即零，然后在会话中存储这个数值。这是我们的初始动作，代表我们刚刚启动Excel处理任务。

如果会话中已经有了这个百分比，那么我们就知道这不是第一次处理请求。我们会模拟处理Excel数据，每次递增进度百分比0.1。这是我们的进步，一点一滴地向前推进。然后，我们会将这个新的百分比值存储在会话中，以便下次使用。

当我们告诉您，Excel的处理进度已经达到或超过100%时，这意味着我们已经完成了所有的分析工作。我们会从会话中移除"uploadPercentage"和"processExcelPercentage"这两个属性，作为任务完成的标志。"finished"的值会设为"true"，代表整个过程已经结束。

现在，我们将向您反馈的状态信息。这些信息包括：处理是否成功（suess）、当前的提示消息（msg）、处理进度百分比（percentage）以及整个任务是否结束（finished）。我们将这些信息整合在一起，通过输出流发送给您。

表单页面upload.html展现了一个文件上传实例的雏形。它以一种现代网页的样式，设计了一个文件上传区域。在这里，你可以轻松地将Excel文件上传至服务器。下面让我们一竟。

该页面首先引入了必要的HTML头部信息，包括字符集设置和标题定义。加载了Ext JS框架的相关资源文件，为页面提供了丰富的交互功能。接着，页面的主体部分呈现了一个文件上传表单。这个表单设计简洁明了，以清晰的标签和按钮为用户提供了良好的使用体验。

在表单中，有一个文件上传字段，用户可以通过点击选择需要上传的Excel文件。这一字段经过精心设计，确保用户能够轻松完成文件选择操作。该字段的必填属性也确保了用户必须选择文件才能进行上传。除此之外，表单中还包含了一个按钮——“开始上传”。当点击该按钮时，会触发一个函数来处理文件上传操作。这个函数的具体实现将在后台控制器中实现。

若你想要验证表单并上传文件，首先确保你的表单是有效的。一旦验证通过，精彩的体验即将开始。

一个提示框会出现在屏幕上，告诉你“正在上传文件”。它有一个醒目的进度条，让你实时了解文件上传的进度。虽然这个过程可能需要一些时间，但请耐心等待。

表单提交后，一个定时器开始倒数，每500毫秒就会向服务器发送一次请求。这就像是你不断询问：“任务完成得怎么样了？”而服务器每次都会回复你的进度。

这个请求会发送到'processController.jsp'，并且每次请求的URL都会附带当前的时间戳。这是因为，如果不加时间戳，由于浏览器缓存的原因，你可能会得到相同的数据。我们希望每次请求都能得到的信息。

服务器回应后，我们会返回的数据。如果任务完成，我们会清除定时器，更新进度条，并告诉你任务已经完成。如果还在进行中，我们就会更新进度条的状态和消息。如果发生错误，我们会告诉你：“出了一点小状况，请稍后再试。”

如果表单无效，我们会弹出一个提示框：“请先选择Excel文件再上传。”请确保你选择了正确的文件。

将这三个文件和Ext的主要文件放到tomcat/webapps/ROOT目录下，然后启动Tomcat服务器。你就可以通过

如果你需要完整的示例文件，可以下载zip文件并解压到同样的目录。这个过程中，需要注意一点，因为我们使用了Apache的fileUpload组件，所以需要将mon-fileupload.jar放到ROOT/WEB-INF/lib目录下。

用cambrian.render('body')来呈现这个美妙的体验。现在，你可以尽情享受这个流畅、高效的文件上传过程了。