java ajax多文件上传并展示上传进度信息

来源：互联网发布：手机淘宝网店怎么铺货编辑：程序博客网时间：2024/05/18 17:42

java使用ajax多文件上传，并带文本描述，且纯js展示上传进度信息。

实现原理：使用commons-fileupload架包自带的上传监听器，把监听信息存入session，然后页面通过ajax定时读取session信息，从而展现上传进度。

技术资源：commons-fileupload.jar、commons-io.jar、jquery-form.js

页面代码：

<%@ 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>多文件上传带进度条</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"><link rel="stylesheet" type="text/css" href="css/easyui.css"><script src="js/jquery-1.11.min.js"></script><script src="js/jquery.form.js"></script><script src="js/jquery.easyui.min.js"></script><style type="text/css">.line {width:500px;height:50px;text-align:center;}.left {display:inline;float:left;width:150px;text-align:right;}.right {display:inline;float:right;width:350px;text-align:left;}.bar {width:400px;height:30px;}</style>  </head>  <script type="text/javascript">  var timestamp = 0;  function upload(){  var file1 = $("#file1").val();  var file2 = $("#file2").val();  if(file1==""&&file2==""){  alert("请选择上传文件");  return;  }  clearBar();  $("#btn1").attr("disabled","disabled");    timestamp = new Date().getTime();  $("#timestamp").val(timestamp);  uploadFlag = true;  uploadStatus();//监听上传进度信息  $("#form1").ajaxSubmit({    url:"<%=basePath%>/UploadFileServlet",    type:"POST",    success:function(res){  if(res=="true"){  uploadFlag = false;  $("#btn1").removeAttr("disabled");  $("#form1")[0].reset();  }else{  $("#btn1").removeAttr("disabled");  $("#progressMsg").empty();  $("#progressMsg").html("上传失败!!!");   }},error:function(msg){alert("出错了");} });     }function clearBar(){//$("#progressBar").progressbar("resize");//恢复进度条到原始宽度//$("#progressBar").progressbar("resize",400);//更改进度条到指定宽度$("#progressBar").progressbar("setValue", 0);$("#progressMsg").empty();}var preBytesRead = 0;//上一秒的已上传大小  function execuBar(bytesRead,contentLength,startTime){  if(bytesRead <= contentLength){  var progressMsg = "上传文件总大小："+getByte(contentLength)+" ，已上传大小："+getByte(bytesRead);if(bytesRead!=contentLength){progressMsg+=" ，上传速度："+getByte(bytesRead-preBytesRead)+"/S";}else{progressMsg+=" ，上传完成！";}  $("#progressMsg").empty();$("#progressMsg").html(progressMsg);var value = $("#progressBar").progressbar("getValue");if (value < 100){var bfb = (bytesRead-preBytesRead)/(contentLength/100);//下载百分比value += parseFloat(bfb.toFixed(5));var num = Math.ceil(parseFloat(value.toFixed(5))*10000)/10000;$("#progressBar").progressbar("setValue", num);preBytesRead = bytesRead;if(bytesRead!=contentLength){setTimeout("uploadStatus()", 1000);}}  }};function uploadStatus(){$.ajax({url:"<%=basePath%>/UploadStatusServlet",type: "post",            data: {timestamp:timestamp},            dataType: "json",    success:function(res){    if(res&&res!=null&&res!=""){    execuBar(res.bytesRead,res.contentLength,res.startTime);    }else{    setTimeout("uploadStatus()", 500);    }},error:function(msg){alert("获取上传进度出错了");}});}function getByte(size){if(size<1024){return size +"B";}else if(size<1024*1024){var kb = size/(1024);return kb.toFixed(2) +"KB";}else if(size<1024*1024*1024){var mb = size/(1024*1024);return mb.toFixed(2) +"MB";}else if(size<1024*1024*1024*1024){var gb = size/(1024*1024*1024);return gb.toFixed(2) +"GB";}else{return "未知大小";}}var uploadFlag = false;//监听页面刷新或关闭事件window.onbeforeunload = function() {           if(uploadFlag){        return "文件正在上传,确定离开本页面吗？";        }   }    </script>  <body >    <h2>java文件上传显示上传进度条</h2>    <form id="form1" action="/UploadServlet" method="post" enctype="multipart/form-data">    <div class="line">    <div class="left">    上传时间戳：    </div>    <div class="right">    <input type="text" id="timestamp" name="timestamp" readonly="readonly" value=""/>    </div>    </div>    <div class="line">    <div class="left">    文件1：    </div>    <div class="right">    <input type="file" id="file1" name="file1" value=""/>    </div>    </div>    <div class="line">    <div class="left">    文件1说明：    </div>    <div class="right">    <input type="text" id="file1text" name="file1text" value=""/>    </div>    </div>        <div class="line">    <div class="left">    文件2：    </div>    <div class="right">    <input type="file" id="file2" name="file2" value=""/>    </div>    </div>    <div class="line">    <div class="left">    文件2说明：    </div>    <div class="right">    <input type="text" id="file2text" name="file2text" value=""/>    </div>    </div>        <div class="line">    <input type="button" id="btn1" value="上传文件" onclick="upload()"/>    </div>    </form>    <div class="line">   <div id="progressBar" class="easyui-progressbar"></div>   <div id="progressMsg" style="font-size:12px;"></div>   </div>  </body></html>

上传servlet:

package com.servlet;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.Iterator;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import org.apache.commons.fileupload.FileItem;import org.apache.commons.fileupload.FileUpload;import org.apache.commons.fileupload.FileUploadBase;import org.apache.commons.fileupload.FileUploadBase.FileSizeLimitExceededException;import org.apache.commons.fileupload.FileUploadException;import org.apache.commons.fileupload.RequestContext;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;import org.apache.commons.fileupload.servlet.ServletRequestContext;import com.util.UploadListener;import com.util.UploadStatus;public class UploadFileServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {  System.out.println("UploadFileServlet上传。。。。。");    String flag = "true";  request.setCharacterEncoding("utf-8");      //String timestamp = request.getParameter("timestamp");//无法获取,本来想多个页面共享不同session        RequestContext requestContext = new ServletRequestContext(request);    //上传文件保存路径  String savePath = this.getServletContext().getRealPath("/upload");  //上传文件临时缓存路径  String tempPath = this.getServletContext().getRealPath("/temp");  HttpSession session = request.getSession();      PrintWriter out = response.getWriter();        try{      if(FileUpload.isMultipartContent(requestContext)){                    DiskFileItemFactory factory = new DiskFileItemFactory();              factory.setRepository(new File(tempPath));//设置缓存路径              factory.setSizeThreshold(1024*100);//设置缓冲区的大小为100KB，如果不指定，那么缓冲区的大小默认是10KB                        ServletFileUpload upload = new ServletFileUpload(factory);              upload.setHeaderEncoding("utf-8");              upload.setFileSizeMax(1024*1024*1000);//设置单个文件上传大小1000M            upload.setSizeMax(1024*1024*5000);//设置总上传文件大小5000M                        upload.setProgressListener(new UploadListener(new UploadStatus(),session));//设置上传进度监听                        List<FileItem> items = new ArrayList<FileItem>();              try {                  items = upload.parseRequest(request);              } catch (FileUploadException e1) {             flag = "false";                System.out.println("文件上传发生错误" + e1.getMessage());              }                Iterator<FileItem> it = items.iterator();              while(it.hasNext()){                  FileItem fileItem = it.next();                  if(fileItem.isFormField()){//文字框                               System.out.println(fileItem.getFieldName()+"   "+fileItem.getName()+"   "+new String(fileItem.getString().getBytes("iso8859-1"), "gbk"));                }else{//文件 流                       System.out.println(fileItem.getFieldName() + "   " +                                  fileItem.getName() + "   " + fileItem.isInMemory() + "    " +                                  fileItem.getContentType() + "   " + fileItem.getSize());                                 if(fileItem.getName()!=null && fileItem.getSize()!=0){                                 File fullFile = new File(fileItem.getName());                                 File newFile = new File(savePath+"/" + fullFile.getName());                                 try {                                     fileItem.write(newFile);                                 } catch (Exception e) {                                flag = "false";                                   e.printStackTrace();                                 }                         }else{                                 System.out.println("文件没有选择 或 文件内容为空");                         }                  }                      }         }else{       System.out.println("不是文件上传form");         }             }catch(Exception e){      flag = "false";      }       out.write(flag);       out.close();   }  }

监听器：

package com.util;import javax.servlet.http.HttpSession;import org.apache.commons.fileupload.ProgressListener;/** * 上传监听器 * @author pure * */public class UploadListener implements ProgressListener {    private UploadStatus status;    private HttpSession session;    public UploadListener(UploadStatus status,HttpSession session){        this.status = status;        this.session = session;    }    public void update(long bytesRead, long contentLength, int items) {        status.setBytesRead(bytesRead);        status.setContentLength(contentLength);        status.setItems(items);        //session.setAttribute("uploadStatus"+timestamp, status);        session.setAttribute("uploadStatus", status);        if(bytesRead==contentLength){        System.out.println("上传完成,耗时"+(System.currentTimeMillis()-status.getStartTime())+"毫秒。");        }        //System.out.println("文件大小为："+contentLength+",已上传："+bytesRead+",items："+items+"，时间戳："+timestamp);    }}

上传进度servlet

package com.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import com.google.gson.Gson;import com.util.UploadStatus;/** * 获取上传进度信息 * @author pure * */public class UploadStatusServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String timestamp = request.getParameter("timestamp");System.out.println("UploadStatusServlet获取上传进度信息。。。"+timestamp);HttpSession session = request.getSession();//UploadStatus status = (UploadStatus)session.getAttribute("uploadStatus"+timestamp);UploadStatus status = (UploadStatus)session.getAttribute("uploadStatus");Gson gson = new Gson();String jsonStr = gson.toJson(status);System.out.println(jsonStr);if(status!=null && status.getBytesRead()==status.getContentLength()){//下载完成session.removeAttribute("uploadStatus");}PrintWriter out=response.getWriter();out.write(jsonStr);out.close();}}

上传信息实体类：

package com.util;public class UploadStatus {private long bytesRead;//已上传大小(b)    private long contentLength;//总大小    private int items;    private long startTime = System.currentTimeMillis();//上传开始时间    public long getBytesRead() {        return bytesRead;    }    public void setBytesRead(long bytesRead) {        this.bytesRead = bytesRead;    }    public long getContentLength() {        return contentLength;    }    public void setContentLength(long contentLength) {        this.contentLength = contentLength;    }    public int getItems() {        return items;    }    public void setItems(int items) {        this.items = items;    }    public long getStartTime() {        return startTime;    }    public void setStartTime(long startTime) {        this.startTime = startTime;    }        }

页面效果：

代码：http://download.csdn.net/download/xiaosheng_papa/9948129

阅读全文

1 0