基于fileUpload文件上传带进度条效果的实例(必看)

技术  /  管理员 发布于 7年前   290

文件上传过程中，如果我们能看到进度条会更好，实现思路是服务器端用监听器实时监听进度并存入session，客户端异步请求服务器端获得上传进度，并进行效果渲染。

效果图：

服务器端servlet：

public class UploadServlet extends HttpServlet {  @Override  protected void doGet(HttpServletRequest req, HttpServletResponse resp)      throws ServletException, IOException {    //取出监听器MyProgress在session中保存的进度信息    String progress=(String) req.getSession().getAttribute("progress");    //响应    resp.getWriter().print(progress);    //清除session中保存的数据//    req.getSession().removeAttribute("progress");  }  @Override  protected void doPost(HttpServletRequest req, HttpServletResponse resp)      throws ServletException, IOException {    req.setCharacterEncoding("UTF-8");    DiskFileItemFactory factory=new DiskFileItemFactory();    ServletFileUpload upload=new ServletFileUpload(factory);    upload.setProgressListener(new MyProgressListener(req));    try {      List<FileItem> list = upload.parseRequest(req);      for (FileItem fileItem : list) {        if (fileItem.isFormField()) {//普通表单        }else{//上传文件          String path=req.getRealPath("uploads");          String fileName=fileItem.getName();          File file=new File(path, fileName);          fileItem.write(file);          System.out.println("成功上传文件："+fileName);        }      }    } catch (Exception e) {      System.out.println("文件上传发生错误！");      e.printStackTrace();    }  }}

服务器端监听器：

public class MyProgressListener implements ProgressListener {  private HttpSession session;  public MyProgressListener(HttpServletRequest request){    session = request.getSession();  }  @Override  public void update(long pBytesRead, long pContentLength, int pItems) {    //将数据进行格式化    //已读取数据由字节转换为M    double readM=pBytesRead/1024.0/1024.0;    //已读取数据由字节转换为M    double totalM=pContentLength/1024.0/1024.0;    //已读取百分百    double percent=readM/totalM;        //格式化数据    //已读取    String readf=dataFormat(pBytesRead);    //总大小    String totalf=dataFormat(pContentLength);    //进度百分百    NumberFormat format=NumberFormat.getPercentInstance();    String progress=format.format(percent);        //将信息存入session    session.setAttribute("progress", progress);        //打印消息到控制台    System.out.println("pBytesRead===>"+pBytesRead);    System.out.println("pContentLength==>"+pContentLength);    System.out.println("pItems===>"+pItems);    System.out.println("readf--->"+readf);    System.out.println("totalf--->"+totalf);    System.out.println("progress--->"+progress);  }  /**   * 格式化读取数据的显示   * @param data要格式化的数据 单位byte   * @return 格式化后的数据，如果小于1M显示单位为KB，如果大于1M显示单位为M   */  public String dataFormat(double data){    String formdata="";    if (data>=1024*1024) {//大于等于1M      formdata=Double.toString(data/1024/1024)+"M";    }else if(data>=1024){//大于等于1KB      formdata=Double.toString(data/1024)+"KB";    }else{//小于1KB      formdata=Double.toString(data)+"byte";    }    return formdata.substring(0, formdata.indexOf(".")+2);  }}

客户端：

<html> <head>  <base href="https:/article/<%=basePath%>" rel="external nofollow" >    <title>带进度条的文件上传效果</title>  <meta http-equiv="pragma" content="no-cache">  <meta http-equiv="cache-control" content="no-cache">  <meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  <meta http-equiv="description" content="This is my page">  <style type="text/css">    #progressBar{width: 300px;height: 20px;border: 1px #EEE solid;}    #progress{width: 0%;height: 20px;background-color: lime;}  </style>  <script type="text/javascript" src="https:/article/js/jquery-1.4.2.js"></script>  <script type="text/javascript">    function upload(){      $("#f1").submit();      var pro=null;      pro=setInterval(function(){        $.get("UploadServlet","",function(data){          if(data=='100%'){clearInterval(pro);$("#proInfo").text("上传进度：100%"); //更新进度条$("#progress").width("100%");          }else{//正在上传//更新进度信息$("#proInfo").text("上传进度："+data);//更新进度条$("#progress").width(data);          }        });      },200);    }      </script> </head>  <body>   <iframe name="aa" style="display: none;"></iframe>  <h2>带进度条的文件上传效果</h2>  <form target="aa" id="f1" action="UploadServlet" method="post" enctype="multipart/form-data">    文件：<input name="file" type="file">    <input type="button" value="上传" onclick="upload();">    <div id="progressBar">      <div id="progress"></div>    </div>    <span id="proInfo">上传进度：0%</span>  </form> </body></html>

说明：为了让上传后该页面不跳转，我们可以让表单跳转至一个隐藏的iframe。

以上这篇基于fileUpload文件上传带进度条效果的实例(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。


  • 上一条：
    配置Chrome支持本地（file协议）的AJAX请求
    下一条：
    Ajax上传文件进度条Codular

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客