struts2实现文件上传显示进度条效果

一. struts2读取进度原理分析(作为草稿存了好久，刚刚发布出来......)

1.在strut2中控制文件上传信息的类是实现MultiPartRequest接口的JakartaMultiPartRequest

其实第一次看到源文件时我打了个退堂鼓，因为觉得内容太长了，不想看。冷静下来将思路理顺，将分开的各个方法还原到一个方方中中，发现还是很好理解的：

@Override
public void parse(HttpServletRequest request, String saveDir)
  throws IOException {
 setLocale(request);
//规定了File文件的格式（如文件名必须是xxFileName，文件类型xxContentType），并定义了File的保存路径             DiskFileItemFactory factory = new DiskFileItemFactory();
 ServletFileUpload upload = new ServletFileUpload(factory);//处理文件上传的servlet
 upload.setProgressListener(new FileUploadProgressListener(request)); //为文件上传添加监听  factory.setSizeThreshold(0); //if (saveDir != null
  factory.setRepository(new File(saveDir));//临时路径
 }
 try {
  upload.setSizeMax(maxSize);
  List items = upload.parseRequest(createRequestContext(request)); //获取所有请求
  for (Object obItem : items) {
   FileItem item = (FileItem) obItem; //获取每个请求的文件
   if (LOG.isDebugEnabled()) {
    LOG.debug("Found item" + item.getFieldName());
   }
   if (item.isFormField()) { //普通表单提交
    LOG.debug("Item is a normal form field");
    List<String> values;
    if (params.get(item.getFieldName()) != null) {
     values = params.get(item.getFieldName());
    } else {
     values = new ArrayList<String>();
    }
    String charset = request.getCharacterEncoding();
    if (charset != null) {
     values.add(item.getString(charset));
    } else {
     values.add(item.getString());
    }
    params.put(item.getFieldName(), values);
   } else { //文件上传请求
    LOG.debug("Item is a file upload");
    if (item.getName() == null
      || item.getName().trim().length() <= 0) {
     LOG.debug("No file has been uploded for the filed:"
       + item.getFieldName());
     continue;
    }

List<FileItem> values;
    if (files.get(item.getFieldName()) != null) {
     values = files.get(item.getFieldName());
    } else {
     values = new ArrayList<FileItem>();
    }
    values.add(item);
    files.put(item.getFieldName(), values);
   }
  }

} catch (FileUploadBase.SizeLimitExceededException e) {
  System.out.println("错误1：" + e);
  if (LOG.isWarnEnabled()) {
   LOG.warn("Request exceeded size limit!", e);
  }
  String errorMessage = buildErrorMessage(e, new Object[]{e.getPermittedSize(), e.getActualSize()});
  if (!errors.contains(errorMessage)) {
   errors.add(errorMessage);
  }
 } catch (Exception e) {
  System.out.println("错误1：" + e);
  if (LOG.isWarnEnabled()) {
   LOG.warn("Unable to parse request", e);
  }
  String errorMessage = buildErrorMessage(e, new Object[]{});
  if (!errors.contains(errorMessage)) {
   errors.add(errorMessage);
  }
 }
}

2.  文件上传监听文件FileUploadProgressListener.java

public class FileUploadProgressListener implements ProgressListener {
private final HttpSession session;
private final DecimalFormat format = new DecimalFormat("#00.0");

public FileUploadProgressListener(HttpServletRequest request) {
session = request.getSession();
FileUploadStatus status = new FileUploadStatus();
session.setAttribute("uploadStatus", status);
}

@Override
public void update(long pBytesRead, long pContentLength, int pItems) {
FileUploadStatus uploadStatus = (FileUploadStatus) session.getAttribute("uploadStatus");
Double uploadRate = (double) (pBytesRead * 100 / pContentLength);
uploadStatus.setUploadRate(Double.valueOf(format.format(uploadRate)));
uploadStatus.setReadedBytes(pBytesRead / 1024);
uploadStatus.setTotalBytes(pContentLength / 1024);
uploadStatus.setCurrentItems(pItems);
}
}

3. 添加状态文件：FileUploadStatus.java

public class FileUploadStatus {
private Double uploadRate = 0.0;
private Long readedBytes = 0L;
private Long totalBytes = 0L;
private int currentItems = 0;
private Long uploadSpeed = 0L;
private Long startTime = System.currentTimeMillis();
private Long readedTimes = 0L;
private Long totalTimes = 0L;
// "-1" 错误 "0" 正常 "1" 完成
private String error = "0";

...
 setter getter方法
...  
}

4. Action类（如果是多文件上传，则将File   FileName   ContentType定义成数组形式即可）

/**
* 利用io流上传文件
*/
public class FileStreamUploadAction extends ActionSupport {
/**
 * serialVersionUID作用： ---相当于类的身份证。 序列化时为了保持版本的兼容性，即在版本升级时反序列化仍保持对象的唯一性。
 * 有两种生成方式： 一个是默认的1L，比如：private static final long serialVersionUID = 1L;
 * 一个是根据类名、接口名、成员方法及属性等来生成一个64位的哈希字段，比如： private static final long
 * serialVersionUID = xxxxL;
 */
private static final long serialVersionUID = 1L;
private File image;
private String imageFileName;
private String imageContentType;
private String message;
public String uploadFile() {
 FileInputStream in = null;
 FileOutputStream out = null;
 System.out.println("文件名：" + imageFileName);
 try {
  this.setNewFileName(imageFileName);
  String realPath = ServletActionContext.getServletContext()
    .getRealPath("/file");
  File filePath = new File(realPath);
  if (!filePath.exists()) { // 如果保存的路径不存在则创建
   filePath.mkdir();
  }
  if (image == null) {
   message = "上传文件为空";
   System.out.println(message);
  } else {
   File saveFile = new File(filePath, this.getNewFileName());
   out = new FileOutputStream(saveFile);
  }
  in = new FileInputStream(image);
  byte[] byt = new byte[1024];
  int length = 0;
  while ((length = in.read(byt)) > 0) {
   out.write(byt, 0, length);
   out.flush();
  }
  message = "上传成功";
  System.out.println(message);
 } catch (FileNotFoundException e) {
  message = "找不到文件！";
  e.printStackTrace();
 } catch (IOException e) {
  message = "文件读取失败！";
  e.printStackTrace();
 } finally {
  closeStream(in, out);
 }
 return "uploadSucc";
}
public void closeStream(FileInputStream in, FileOutputStream out) {
 try {
  if (in != null) {
   in.close();
  }
  if (out != null) {
   out.close();
  }
 } catch (IOException e) {
  // TODO Auto-generated catch block
  e.printStackTrace();
 }
}
 ...
 setter() getter()
 ...  
}

获取进度的Action

public class FileProgressAction extends ActionSupport {
private static final long serialVersionUID = 1L;
private FileUploadStatus uploadStatus;

public String uploadPercent() {
HttpSession session = ServletActionContext.getRequest().getSession();
this.uploadStatus = (FileUploadStatus) session.getAttribute("uploadStatus");
if (uploadStatus == null) {
System.out.println("action is null");
uploadStatus = new FileUploadStatus();
uploadStatus.setCurrentItems(0);
}
return "getPercent";
}

public FileUploadStatus getUploadStatus() {
return uploadStatus;
}

public void setUploadStatus(FileUploadStatus uploadStatus) {
this.uploadStatus = uploadStatus;
}
}

5.struts.xml中

<struts>
 <constant name="struts.multipart.maxSize" value="2147483648"/><!-- 默认值为2M,设置为2G -->
 <constant name="struts.custom.i18n.resources" value="messageResource" />
 <constant name="struts.i18n.encoding" value="utf-8" />
 <constant name="struts.multipart.saveDir" value="e:/fileUpload"/><!-- 临时路径 -->

<!-- 加载自定义的文件读取配置文件 -->
 <bean type="org.apache.struts2.dispatcher.multipart.MultiPartRequest" name="Refactor" class="com.nova.core.RefactorMultiPartRequest" scope="default" />
 <constant name="struts.multipart.handler" value="Refactor" />
 <!-- 这里配置struts.multipart.handler -->
 <package name="ajaxUpload" extends="json-default"> <!-- json-default需要struts2-json-plugin-2.3.3.jar -->
  <action name="ajaxUploadFile_*" class="com.nova.action.FileStreamUploadAction" method="{1}">
   <result type="json" name="uploadSucc">
    <param name="root">newFileName</param>
    <param name="contentType">
     text/html
    </param>
   </result>
  </action>
  <action name="uploadPercent_*" class="com.nova.action.FileProgressAction" method="{1}">
   <result name="getPercent" type="json">
    <param name="root">uploadStatus</param>
   </result>
  </action>
 </package>
</struts>

二.  进度条显示

View页面设置，利用ajaxfileupload.js来获取文件并进行异步上传，bootstrap中的进度条效果显示进度（利用setInterval间断的获取进度信息来形式一种进度的前进显示）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.css" rel="external nofollow" >
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript" src="<％=request.getContextPath() ％>/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="<％=request.getContextPath() ％>/bootstrap/js/jquery.showLoading.min.js"></script>
<script type="text/javascript">
var setinterval;
$(document).ready(function(){
 $("#upload").click(function(){
  $("#upload").addClass("disabled");
  $("#upload").attr("disabled" ,true);
  $("#upload").attr("title" ,"文件上传中...");
  uploadFile();
  setinterval = setInterval(uploadProgress,200);
 });
});
//文件上传
function uploadFile(){
 $.ajaxFileUpload({
  url:'ajaxUploadFile_uploadFile.action',
  secureuri:false, //是否采用安全协议，默认为false
  fileElementId:'image',
  dataType: 'json',
  success: function (data){
   $("#showImage").attr("src","/FileUpLoadTest/file/"+data);
  }
 });
}
//上传进度
function uploadProgress(){
 $.get("uploadPercent_uploadPercent.action","",function(data){
  $("#ProgressRate").html("上传速度：" + data.uploadRate + "％");
  $("#readBytes").html("以读取：" + data.readedBytes + " KB");
  $("#totalBytes").html("总大小：" + data.totalBytes + " KB");
  $("#progress").attr("style","width:" + data.uploadRate + "％;");
  $("#progress").html(data.uploadRate + "％");
  if(data.uploadRate == 100){
   clearInterval(setinterval);
   $("#progress").html("上传成功");
   $("#upload").removeClass("disabled");
   $("#upload").attr("disabled" ,false);
  }
 });
}
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
 <div class="navbar-inner">
 <div class="container">
  <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>
  <a class="brand" href="#" rel="external nofollow" >文件异步上传+进度条</a>
 </div>
 </div>
</div>
<br><br><br>
<div class="container">
 <input type="file" name="image" id="image"/><br/> //file的name属性必须设置的与后台Action中file的名称是相同的，否则ajaxFileUpload获取不到文件信息
 <input type="button" id="upload" value="上传" class="btn btn-info" title=""/><br/>
 <img alt="" src="" id="showImage">
 <div id="ProgressRate"></div>
 <div id="readBytes"></div>
 <div id="totalBytes"></div>
 <div id="uploadTimes"></div>
 <div class="progress progress-striped span4">
   <div id="progress" class="bar">
   </div>
 </div>
</div>
</body>
</html>

三、总结

用这种方法获取上传进度有一个缺点：读取进度阶段是文件从指定目录开始在临时文件中存储的过程，而文件上传则是重临时路径下将文件转移到目标路径下，这样就造成了一个时间差，就是读取进度总会比上传文件快，上传的文件越大这个缺点越是明显。