当前位置: 移动技术网 > IT编程>开发语言>Java > struts2实现文件上传显示进度条效果

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

2019年07月22日  | 移动技术网IT编程  | 我要评论

n0647,猥琐委员长,更年期综合症症状

一. 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>


三、总结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网