struts1.2下实现文件上传进度条

### Struts 1.2 下实现文件上传进度条的关键知识点 #### 一、背景与目的 在基于Struts 1.2的Web应用中，实现文件上传时常常需要提供一个友好的用户界面来显示文件上传进度。这不仅提高了用户体验，还能够实时反馈上传状态，减少用户的等待焦虑。 #### 二、技术栈 为了实现在Struts 1.2框架下的文件上传进度条功能，本案例使用了以下技术栈： 1. **Java版本**：1.5.x（兼容性设置为1.4） 2. **IDE**：MyEclipse 5.1.1 3. **框架**： - **SpringSide**：2.0-RC1-allinone包 - **Struts**：1.2.7版本 4. **Ajax Upload**：1.0版本，用于处理文件上传和进度显示 #### 三、实现步骤 ##### 1. 客户端部分 - **理解项目结构**：首先需要了解`ajax-upload-1.0.war`包的结构，这是实现进度条的基础。 - **资源复制**： - 将`ajax-upload-1.0`中的`resource`文件夹复制到Web项目的`Webroot`目录下。 - 将`ajax-upload-1.0`中的`WEB-INF/lib`文件夹复制到Web项目的`WEB-INF`目录下。 - 复制`ajax-upload-1.0`中的`WEB-INF/dwr.xml`到Web项目的`WEB-INF`目录下。 - 将`ajax-upload-1.0`中的`WEB-INF/web.xml`作为参考，根据实际需求修改Web项目的`web.xml`配置文件。 - 将`ajax-upload-1.0`中的`ajax-upload.iml`、`ajax-upload.ipr`、`ajax-upload.iws`文件复制到Web项目的`Webroot`目录下。 - **样式与布局理解**： - 仔细研究`index.jsp`中的CSS样式定义，以便调整进度条的外观。 ```html <style type="text/css"> body{font:11px Lucida Grande,Verdana,Arial,Helvetica,sans-serif;} #progressBar{padding-top:5px;} #progressBarBox{width:350px;height:20px;border:1px inset;background:#eee;} #progressBarBoxContent{width:0;height:20px;border-right:1px solid #444;background:#9ACB34;} </style> ``` - 理解进度条在页面上的布局逻辑。 ```html <div id="progressBar" style="display:none;"> <div id="theMeter"> <div id="progressBarText"></div> <div id="progressBarBox"> <div id="progressBarBoxContent"></div> </div> </div> </div> ``` - **JavaScript增强**： - 在`resources/js/upload.js`文件中添加代码，禁用表单提交按钮，防止用户重复提交。 ```javascript function disableSubmit() { var allInputs = document.forms[0].getElementsByTagName('input'); for (var k = 0; k < allInputs.length; k++) { if (allInputs[k].type == "submit") { allInputs[k].disabled = true; } } } ``` - 在文件上传过程中进一步增强功能，禁用其他输入类型如文件选择框等。 ```javascript function disableButton() { var allInputs = document.forms[0].getElementsByTagName('input'); for (var k = 0; k < allInputs.length; k++) { if (allInputs[k].type == "submit") { allInputs[k].disabled = true; } if (allInputs[k].type == "file") { allInputs[k].disabled = true; } if (allInputs[k].type == "button") { allInputs[k].disabled = true; } } } ``` ##### 2. 服务器端部分 - **整合Struts与Ajax Upload**： - 修改`struts-config.xml`，配置Action映射以支持文件上传操作。 - 实现文件上传逻辑，处理上传进度数据。 - 设置监听器以捕获上传事件，更新客户端进度条。 #### 四、总结 通过以上步骤，我们可以在Struts 1.2框架下成功实现文件上传进度条的功能。这一过程不仅涵盖了客户端样式设计和布局，还包括了服务器端的配置与逻辑实现。整体而言，该方案提供了良好的用户体验，同时也增强了Web应用程序的功能性和可用性。