eclipse 基于struts2 + json 实现文件异步上传， 显示进度条

如果需要源码的朋友请发emial  给我:[e-mail]

在这里希望跟各位朋友多多交流，有什么不足的地方请指教。

 

2个难点： 1 异步上传  （重点：浏览器兼容问题。  怎么在JS中获取<intpu file="file"> 里面的value,. ）

                     2 显示进度条(难点：1怎么监听文件上传过程， 2 实现进度条，需要多线程)

 

 

所需技术支持：

1 struts2 （需要使用到它与json的集成， 2 需要commons-fileupload.jar 实现文件上传监听）

2 jquery  (异步上传基于jquery技术实现)

3 juqeyr_ui (使用里面的progressBar  的样式)

4 struts-json-plugin(建立客户端js与服务端action的数据传输)

5 ajaxfileupload.js (实现异步文件上传，兼容浏览器,基于jquery)

 

 

===============================================================================================================

            开始开发

======================================

 

搭建环境，导入包，最后项目建立后的结果如图：

1建立daync-web-project : struts2-json

2导入struts2 相关JAR包， json包

3 导入jquery 1.83.js, 

           ajaxfileupload.js,

           jquery-easy.ui.js

4导入jquery.easy.ui.css

    

 

 

 

环境搭建完毕之后，我们可以做自己想做的了。。

1 配置web.xml 如图:

 

2 在src下面创建struts.xml ，配置如图：

4 创建文件上传filter, 监听类 如图：

 

具体实现如下：

 

 

=======================================================================================================

=============================================

package com.test.filter;

import java.io.File;
import java.io.IOException;
import java.util.List;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.FileCleanerCleanup;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileCleaningTracker;

public class FileUploadFilter implements Filter
{
 private ServletContext context;

 @Override
 public void destroy() {
 }

 @Override
 public void doFilter(ServletRequest request, ServletResponse response,
   FilterChain filterChain) throws IOException, ServletException {
  doUpload((HttpServletRequest)request, (HttpServletResponse)response);
  filterChain.doFilter(request, response); 
 }

 @Override
 public void init(FilterConfig arg0) throws ServletException {
  context = arg0.getServletContext();
 }
 
 private void doUpload(HttpServletRequest request, HttpServletResponse response)
 {
  if(ServletFileUpload.isMultipartContent(request))
  {
   DiskFileItemFactory factory = new DiskFileItemFactory();
   
   // 清理临时目录 servletContent
   FileCleaningTracker cleaningTracker = FileCleanerCleanup.getFileCleaningTracker(context);
   factory.setFileCleaningTracker(cleaningTracker);
   // 设置文件保存目录
   factory.setRepository(getRepository());
   //创建上传目录
   ServletFileUpload upload = new ServletFileUpload(factory);
   upload.setFileSizeMax(500*1024*1024);
   upload.setHeaderEncoding("UTF-8");
   UploadListener uploadListener = new UploadListener(request);
   upload.setProgressListener(uploadListener);
   try {
    List<FileItem> items = upload.parseRequest(request);
    for (FileItem item : items)
    {
      if (item.isFormField())
      {
       System.out.println("fail=============");
      }
      else
      {
          String value = item.getName(); //获取文件名
          System.out.println("FileName :" + value);
          uploadListener.setFileName(value);
          item.write(new File(factory.getRepository(), value)); // 将文件写到指定目录
          System.out.println("success===========");
      }
    }
   } catch (FileUploadException e) {
    e.printStackTrace();
   } catch (Exception e) {
    e.printStackTrace();
   }
  }
 }
 
 private File getRepository()
 {
  Object repository =  context.getContext("repository");
  if (repository == null)
  {
   repository = new File(context.getRealPath("/uploadFileDir"));
   ((File)repository).mkdirs();
   context.setAttribute("repository", repository);
  }
  return (File) repository;
 }
}

 

=======================================================================================================

=============================================

package com.test.filter;

public class FileUploadStatus { 
 //文件名
   private String fileName;
  
   //上传总量 
   private long uploadTotalSize=0; 
   //读取上传总量 
   private long readTotalSize=0; 
  
   private LoadingStatus loadingStatus; 
 
    public long getReadTotalSize() { 
        return readTotalSize; 
    } 
    public void setReadTotalSize(long readTotalSize) { 
        this.readTotalSize = readTotalSize; 
    }  
 
 public LoadingStatus getLoadingStatus() {
  return loadingStatus;
 }
 public void setLoadingStatus(LoadingStatus loadingStatus) {
  this.loadingStatus = loadingStatus;
 }
 public long getUploadTotalSize() { 
        return uploadTotalSize; 
    } 
    public void setUploadTotalSize(long uploadTotalSize) { 
        this.uploadTotalSize = uploadTotalSize; 
    }
 public String getFileName() {
  return fileName;
 }
 public void setFileName(String fileName) {
  this.fileName = fileName;
 } 
} 

=================================================

================================================

package com.test.filter;

public enum LoadingStatus {
 PROCESSING("processing"), COMPLETE("complete"), CANCAL("cancal");
 private String value;
 LoadingStatus(String value)
 {
  this.value = value;
 }
 public String getValue() {
  return value;
 }
 public void setValue(String value) {
  this.value = value;
 }
}

=================================================

==================================================

package com.test.filter;

import javax.servlet.http.HttpServletRequest;
import org.apache.commons.fileupload.ProgressListener;
public class UploadListener implements ProgressListener { 
   public static final String UPLOAD_KEY="UPLOAD_FILE_KEY";
   private HttpServletRequest request=null; 
   private String fileName;
  
    public UploadListener (HttpServletRequest request){ 
        this.request=request;
        initFileUploadStatusBean(UPLOAD_KEY);
    } 
   
    public void update(long pBytesRead, long pContentLength, int pItems) { 
        FileUploadStatus fuploadStatus = takeOutFileUploadStatusBean(UPLOAD_KEY); 
        System.out.println("currentSize:"+pBytesRead + " totalSize:" + pContentLength + " num:" + pItems);
        // read finish
        if (pContentLength == pBytesRead) { 
            fuploadStatus.setLoadingStatus(LoadingStatus.COMPLETE);
            fuploadStatus.setReadTotalSize(pBytesRead); 
            System.out.println("finish" + fuploadStatus.getLoadingStatus());
           
        }
        else{//reading 
               fuploadStatus.setLoadingStatus(LoadingStatus.PROCESSING); 
               fuploadStatus.setReadTotalSize(pBytesRead); 
        } 
        storeFileUploadStatusBean(fuploadStatus,UPLOAD_KEY); 
    } 
    
    private void initFileUploadStatusBean(String uploadKey){ 
     FileUploadStatus fileUploadStatus = new FileUploadStatus();
     fileUploadStatus.setUploadTotalSize(request.getContentLength()); //因为upload里面要多此调用，所以在这里设置
     request.getSession().setAttribute(uploadKey,fileUploadStatus);
    }
    private void storeFileUploadStatusBean(FileUploadStatus uploadStatusBean,String uploadKey){ 
        request.getSession().setAttribute(uploadKey,uploadStatusBean); 
    }
    private FileUploadStatus takeOutFileUploadStatusBean(String uploadKey){ 
     FileUploadStatus obj=(FileUploadStatus) request.getSession().getAttribute(uploadKey); 
        return obj; 
    }
      
 public String getFileName()
 {
  return fileName;
 }
 
 public void setFileName(String fileName)
 {
  FileUploadStatus obj = takeOutFileUploadStatusBean(UPLOAD_KEY);
  obj.setFileName(fileName);
  this.fileName = fileName;
 }
} 

 

 

 

 

================================================

创建 upload.html

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <link rel="stylesheet" type="text/css" href="/struts2-json/css/easyui.css">
  <link rel="stylesheet" type="text/css" href="/struts2-json/css/icon.css">
  <link rel="stylesheet" type="text/css" href="/struts2-json/css/demo.css">
  <script type="text/javascript" src="/struts2-json/js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="/struts2-json/js/ajaxfileupload.js"></script>
  <script type="text/javascript" src="/struts2-json/js/jquery.easyui.min.js"></script>

<script type="text/javascript">

function startUpload()
 { 
 $.ajaxFileUpload
 (
     {
         url:'upload.do',// action url
         secureuri:false,
         fileElementId:'file', //this is input file id
         dataType: 'json',//return value
         success: function (data, status)
         {
           //alert(status);
         },
         error: function (data, status, e)         {
           //alert(status + " :" + e); 
         }
     }
 );
 }
 
 function progressFn()
 {
   $.getJSON("testAction.do", function(data){
     var uploadStatus = data.status; //get status from testAction
     if (uploadStatus != null && uploadStatus.loadingStatus != null && uploadStatus.loadingStatus == 'COMPLETE')
     {
      $("#filename").text(uploadStatus.fileName);
      setProgressbarFn(100);
     }
     else
     {
       if(uploadStatus != null)
       {
        var alReadySize = uploadStatus.readTotalSize;
        var totalSize =  uploadStatus.uploadTotalSize;
        setProgressbarFn(Math.floor(alReadySize * 100 / totalSize));
       }
       window.setTimeout(progressFn, 100);
     }
  });
 }
 
 // set progressBar
 function setProgressbarFn(value)
 {
   $('#p').progressbar('setValue', value); 
 }
 
 function uploadFile()
 {
 startUpload();
 progressFn();
 
 }

</script>
</head>
<body>
  <div>
 <table>   
    <tr>
     <td><div id="p" class="easyui-progressbar" style="width:733px;"></div> </td> 
     <td> 文件名 : <span id="filename"></span></td>
    </tr>
    </table>    
  </div>
    <div>
  <input type="file" name="file" id="file"/>
  <button onclick="uploadFile()">上传</button>
 </div>
</body>
</html>

 

 

 

最后将项目发布到tomcat ..   在FilreFox 中 输入http://localhost:8080/struts2-json/ ...