好久没有写东西，最近在做个项目，要用到文件h 传的，以前虽然也做上传，但是总觉得不好用 ，现在和队友合作做了一个带进度条的上传，觉得还行~~和大家分享一下。
首先说一下大概是这样实现的，在我们平时的上传表单里面，除了文件上传之外，也许还有其他的信息需要填写的，这样问题就来了：点击上传按钮之后，这个表单都封装并提交上去了，在上传完成后整个页面就跳转了。而且也不利于我们验证用户输入。很多人这样做的，把这2个操作分开，当然这样也行。。。
我们这样做：一个普通页面（可以用于填写所有信息的），一个文件上传页面，一个上传成功页面（这个不怎么重要）
然后关键的就是：把文件上传的页面嵌入到普通页面里面去，相当于说文件上传实际是由上传页面独立完成，信息填写页面也独立成功信息填写，这里我们用iframe。
不多说，上代码：
1、处理上传的Action
package org.yzsoft.upload.action;
import java.io.*;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class UploadAction extends ActionSupport {
private static final int BUFFER_SIZE = 100;// 上传的字符流大小（单位：字节）
// 用File来封装上传文件域对象
private File file;
// 保存文件的目录路径(通过自动注入)
private static String ext; //文件后缀
private static String fileFileName;
private static float percent = 0;//百分比
// 自己封装的一个把源文件对象复制成目标文件对象
private static void copy(File src, File dst) {
InputStream in = null;
OutputStream out = null;
float completedSize = 0;//已经上传的大小
float fileSize = 0;//文件总大小
try {
in = new BufferedInputStream(new FileInputStream(src), BUFFER_SIZE);
out = new BufferedOutputStream(new FileOutputStream(dst), BUFFER_SIZE);
fileSize = in.available();
byte[] buffer = new byte[BUFFER_SIZE];
int len = 0;
while ((len = in.read(buffer)) > 0) {
out.write(buffer, 0, len);
completedSize += (long) len;
percent = completedSize / fileSize * 100;//百分比计算
}
} catch (Exception e) {
System.out.println(e);
} finally {
if (null != in) {
try {
in.close();
} catch (IOException e) {
System.out.println(e);
}
}
if (null != out) {
try {
out.close();
} catch (IOException e) {
System.out.println(e);
}
}
}
}
public String sumPre() { //计算后百分比输回页面
try {
PrintWriter out = ServletActionContext.getResponse().getWriter();
System.out.println(getFileFileName() + " filename");
out.print(percent);
} catch (IOException e) {
System.out.println("异常：" + e);
}
return null;
}
//上传的方法
public String upload() {
try {
if (percent >= 99.9) {//这里保险起见我们设百分比》99.9就清0，避免进度条到了100%就停在那里不动的尴尬
percent = 0;
}
File srcfile = this.getFile();// 自动注入的方法取得文件域的对象
// 根据服务器的文件保存地址和原文件名创建目录文件全路径
String uploadPath = ServletActionContext.getServletContext().getRealPath("upload");// 上传路径
ext = fileFileName.substring(fileFileName.lastIndexOf(".")).toLowerCase();// 取得后缀
System.out.println("取得后缀 " + ext);
File dstFile = new File(uploadPath, fileFileName);
copy(srcfile, dstFile);
} catch (Exception e) {
System.out.println(e);
}
return "success";
}
/**************/
public File getFile() {
return file;
}
public void setFile(File file) {
this.file = file;
}
public String getFileFileName() {
return fileFileName;
}
public void setFileFileName(String fileFileName) {
this.fileFileName = fileFileName;
}
}
2、上传表单页面（就是我们平时普通的表单页面，样式有点乱。不理它了。嘻嘻~~~）
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
</head>
<body>
<form action="upload_doCreate.action" method="post" name="form" >
<table id="table2" width="99%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>文件上传</th>
</tr>
<tr>
<td ><table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tr>
<td align="left"> </td>
</tr>
<tr>
<td width="100%">
<table border="0" cellpadding="2" cellspacing="1" style="width:100%">
<tr>
<td align="right">文件名：</td>
<td><input type="text" id="filename" value=""/></td>
</tr>
<tr>
<td align="right">文件路径：</td>
<td><iframe style="width: 400px;height: 25px" scrolling='no' frameborder='0' resizable='no' allowtransparency='true' cellspacing='0' border='0' src='fileupload.jsp' id='iframeupload'></iframe></td>
</tr>
</table>
<br />
</td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2" align="center" height="50px">
<input type="Submit" name="Submit" value="保存" class="button" />
<input type="button" name="Submit2" value="返回" class="button" onclick="window.history.go(-1);"/></td>
</tr>
</table>
</form>
</body>
</html>
3、上传进度条页面（注意，这个是用一个iframe的源文件链接实现的）
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script type="text/javascript" src="jquery-1.6.2.min.js">
</script>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-size: 14px;
}
-->
</style>
<script type="text/javascript">
function aa() {
$("#div1").hide();
$("#div2").show();
$.post("sumPre", {}, function(data) {//AJAX方式发送请求到Action的sumPre方法，计算后将百分比data返回来
$("#img").attr("width", parseInt(data) * 1.5);//设置进度条长度，这里*1.5只是为了把进度条显示长一点，好看一点
$("#p").html(parseInt(data) + "%");//进度百分比
});
window.setTimeout("aa()", 10);//定时执行
}
</script>
</head>
<body>
<div id="div1">
<form name='aform1' method='post' action="fileUpload.action"
enctype="multipart/form-data">
<input name='file' type='file' />
<input type="submit" value="上传" onclick="return aa();" />
</form>
</div>
<div id="div2" style="width: 400px; display: none;">
正在上传...
<img alt="" src="13221820.gif" width="16" height="16">
<img id="img" alt="" src="percent.jpg" width="1" height="5">
<span id="p" style="position: absolute; right: 30%; top: 0px;"></span>
</div>
</body>
</html>
4、上传成功后的页面（就是一个简单的页面）
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
font-size: 14px;
}
-->
</style>
</head>
<body>
上传成功
</body>
</html>
5、Struts.xml 配置文件
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<!-- Author: yzx -->
<struts>
<constant name="struts.multipart.maxSize" value="61440000000"></constant>
<package name="fileUpload" namespace="/" extends="struts-default">
<action name="fileUpload" class="org.yzsoft.upload.action.UploadAction" method="upload">
<result name="success">/filejd.jsp</result>
</action>
<action name="sumPre" class="org.yzsoft.upload.action.UploadAction" method="sumPre">
</action>
</package>
</struts>
接着：
我们在本机调试上传的时候，网页可能会有所卡顿，这个没关系，我们绑到服务器上就正常了，主要是浏览器处理文件的时候硬件性能问题。
总的来说，这个上传还是比较简单的（至少我这样认为~_~）
最后附上源码：欢迎大家多多交流，小弟这里先谢过啦~~~嘻嘻~~
分享到：
相关推荐
总之，Struts2与jQuery结合使用可以创建一个高效的文件上传系统，通过实时反馈的进度条提高用户体验。这个项目提供的所有包将帮助开发者快速搭建并测试此功能，避免了从零开始配置和编写代码的麻烦。
在这个“Struts2+上传进度条完美运行”的主题中，我们将深入探讨如何在Struts2框架下实现文件上传功能，并结合进度条展示上传进度，提供用户友好的交互体验。 1. **Struts2文件上传**： Struts2通过`struts2-core`...
以前做.net时，用过一个FlashFileUpload.swf批量文件上传工具，很帅很简单。 网址：http://www.codeproject.com/KB/aspnet/FlashUpload.aspx 因为这个用Flex写的客户端插件公开源码，而且实现的的相当完美，在asp...
标题中的“完美SS2H+ajaxfileupload异步上传多个附件、删除”涉及到的是一个Web应用中的文件上传功能实现，具体来说，它结合了Spring Security（SS）和Struts2 (SH)两个框架，并利用ajaxfileupload.js这个JavaScript...
实现了多文件批量队列上传,有完美进度条列表,已经详细的上传信息显示. 实现了多文件压缩,以及解压缩文件,包括解压缩rar文件 实现了文件下载.等基本功能 此项目继续开发中... 共享给大家,希望能够帮助朋友:) 讨论Q_群...
5. **进度条显示**：上传文件时，可以使用AJAX异步传输，并在前端显示进度条，让用户体验更友好。 6. **地图定位**：在地图应用中，用户拖动或缩放地图时，通过AJAX向服务器请求新的地理位置信息，实现平滑过渡。 ...
2. **全面的功能**：Ec[s]d控制器可以实现Struts2的所有功能，如文件上传（支持进度条）和下载，这些功能都无需额外配置。 3. **参数封装**：提交的参数会自动注入到方法的参数中，开发者可直接获取，无需创建单独...