第一种方法:(利用jquery中自带的xhr属性)
jsp页面代码:
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 <html> 3 <head> 4 <title>文件上传监听</title> 5 </head> 6 <style> 7 #box{ 8 width: 300px; 9 height: 20px;10 border: 1px solid black;11 }12 #content{13 width: 0%;14 height: 20px;15 background: green;16 margin-top: -10px;17 }18 </style>19 <script src="js/jquery-1.11.3.min.js"></script>20 <body>21 <form id="frm" action="#" method="post">22 <p><input type="file" name="file" ></p>23 <p><input id="btn" type="button" value="提交"></p>24 </form>25 <p id="p"></p>26 <div id="box">27 <div id="content"></div>28 </div>29 30 </body>31 <script>32 $(function(){33 $("#btn").click(function(){34 var formData=new FormData($("#frm")[0]);35 $.ajax({36 url:"listenerUpload.do",37 type:"post",38 data:formData,39 dataType:"json",40 contentType:false,41 processData:false,42 xhr:function(){43 var myXhr=$.ajaxSettings.xhr();44 if(myXhr.upload){45 myXhr.upload.addEventListener("progress",function(event){46 var loadedSize=event.loaded;47 var loadSize=event.total;48 var precent=Math.floor(100*(loadedSize/loadSize))+"%";49 $("#content").css("width",precent);50 },false);51 }52 return myXhr;53 },54 success:function(result){55 if(result.data=="success"){56 $("#p").text("上传成功!");57 }else{58 $("#p").text("上传失败!");59 }60 },61 error:function(){62 alert("服务器内部错误!");63 }64 });65 });66 67 })68 </script>69 </html>
servlet代码:
1 package servlet; 2 3 import com.alibaba.fastjson.JSONObject; 4 import org.apache.commons.fileupload.FileItem; 5 import org.apache.commons.fileupload.FileUploadException; 6 import org.apache.commons.fileupload.ProgressListener; 7 import org.apache.commons.fileupload.disk.DiskFileItemFactory; 8 import org.apache.commons.fileupload.servlet.ServletFileUpload; 9 10 import javax.servlet.ServletException;11 import javax.servlet.annotation.WebServlet;12 import javax.servlet.http.HttpServlet;13 import javax.servlet.http.HttpServletRequest;14 import javax.servlet.http.HttpServletResponse;15 import java.io.File;16 import java.io.IOException;17 import java.io.PrintWriter;18 import java.util.List;19 import java.util.UUID;20 21 @WebServlet(value = "/listenerUpload.do")22 public class ListenerUploadServlet extends HttpServlet {23 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {24 PrintWriter out=response.getWriter();25 JSONObject jsonObject=new JSONObject();26 boolean flag=false;27 if(ServletFileUpload.isMultipartContent(request)){28 DiskFileItemFactory factory=new DiskFileItemFactory();29 factory.setSizeThreshold(1024000000);30 factory.setRepository(new File("D:\\res"));31 ServletFileUpload upload=new ServletFileUpload(factory);32 upload.setFileSizeMax(1024000000);33 upload.setSizeMax(1024000000);34 ProgressListener progressListener=new ProgressListener() {35 @Override36 public void update(long readByte, long totalByte, int i) {37 System.out.println("已读字节:"+readByte+",总字节数:"+totalByte+",文件序号:"+i);38 }39 };40 upload.setProgressListener(progressListener);41 try {42 List<FileItem> fileItems=upload.parseRequest(request);43 for(FileItem f:fileItems){44 if(!f.isFormField()){45 File file=new File("D:\\upload\\"+ UUID.randomUUID()+f.getName().substring(f.getName().lastIndexOf(".")));46 f.write(file);47 flag=true;48 }else{49 System.out.println("表单名:"+f.getFieldName()+" 输入值:"+f.getString("UTF-8"));50 }51 }52 } catch (FileUploadException e) {53 e.printStackTrace();54 } catch (Exception e){55 e.printStackTrace();56 }57 }58 if(flag){59 jsonObject.put("data","success");60 }else{61 jsonObject.put("data","error");62 }63 out.write(jsonObject.toString());64 }65 66 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {67 this.doPost(request,response);68 }69 }
第二种方法:通过session存储文件上传进度
jsp页面代码:
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 <html> 3 <head> 4 <title>文件上传</title> 5 <script src="js/jquery-1.11.3.min.js"></script> 6 <script> 7 //编写jQuery语句 8 $(function () { 9 var flag;10 $("[type=button]").click(function () {11 var formDate=new FormData($("#frm")[0]);12 $.ajax({13 type:"post",14 url:"UploadServlet",15 data:formDate,16 dataType:"json",17 contentType:false,18 processData:false,19 success:function (result) {20 flag=result.data;21 /*if(result.data=="1" && $("#proInfo").text()=="上传进度:100%"){22 alert("上传成功!")23 }*/24 },25 error:function () {26 alert("服务器内部错误!");27 }28 });29 30 var pro=null;31 pro=setInterval(function(){32 $.get("UploadServlet","",function(data){33 if(data==‘100%‘){34 clearInterval(pro);35 $("#proInfo").text("上传进度:100%");36 //更新进度条37 $("#progress").width("100%");38 39 setTimeout(function () {40 if(flag=="1"){41 42 alert("上传成功!");43 }44 },300);45 46 47 }else{//正在上传48 //更新进度信息49 $("#proInfo").text("上传进度:"+data);50 //更新进度条51 $("#progress").width(data);52 }53 });54 },200);55 });56 57 58 });59 </script>60 <style>61 #progressBar{width: 300px;height: 20px;border: 1px #EEE solid;}62 #progress{width: 0%;height: 20px;background-color: green;}63 </style>64 </head>65 <body>66 <form id="frm" method="post">67 <p><input type="file" name="ff"></p>68 <p>69 <input type="button" value="上传">70 <div id="progressBar">71 <div id="progress"></div>72 </div>73 <span id="proInfo">上传进度:0%</span>74 </p>75 </form>76 77 </body>78 </html>
servlet代码:
1 package servlet; 2 3 4 import test.MyProgressListener; 5 import net.sf.json.JSONObject; 6 import org.apache.commons.fileupload.FileItem; 7 import org.apache.commons.fileupload.FileUploadException; 8 import org.apache.commons.fileupload.disk.DiskFileItemFactory; 9 import org.apache.commons.fileupload.servlet.ServletFileUpload;10 11 import javax.servlet.ServletException;12 import javax.servlet.annotation.WebServlet;13 import javax.servlet.http.HttpServlet;14 import javax.servlet.http.HttpServletRequest;15 import javax.servlet.http.HttpServletResponse;16 import java.io.File;17 import java.io.IOException;18 import java.io.PrintWriter;19 import java.util.List;20 import java.util.UUID;21 22 @WebServlet(value = "/UploadServlet")23 public class UploadServlet extends HttpServlet {24 @Override25 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {26 //取出监听器MyProgress在session中保存的进度信息27 String progress=(String) request.getSession().getAttribute("progress");28 //响应29 response.getWriter().print(progress);30 //清除session中保存的数据31 //request.getSession().removeAttribute("progress");32 }33 34 @Override35 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {36 response.setContentType("text/html");37 PrintWriter out = response.getWriter();38 JSONObject json=new JSONObject();39 /**40 * 1.判断请求是否为multipart41 * 2.创建磁盘工厂,设置内存大小和临时存储位置42 * 3.创建ServletFileUpload设置单个文件上传大小以及整个request域大小43 * 4.创建ProgressListener对象监听文件上传进度44 * 5.解析request域45 */46 int sign=0;47 //判断请求是否为multipart48 if(ServletFileUpload.isMultipartContent(request)){49 //创建磁盘工厂,设置内存大小和临时存储位置50 DiskFileItemFactory factory=new DiskFileItemFactory();51 //factory.setSizeThreshold(10240000);52 //如果文件大小大于内存大小则存储在临时存储空间53 factory.setRepository(new File("D:\\res"));54 //创建ServletFileUpload设置单个文件上传大小以及整个request域大小55 ServletFileUpload upload=new ServletFileUpload(factory);56 //upload.setFileSizeMax(10240000);57 //upload.setSizeMax(10240000);58 //创建ProgressListener对象监听文件上传进度59 upload.setProgressListener(new MyProgressListener(request));60 61 //解析request域62 try {63 List<FileItem> fileItems=upload.parseRequest(request);64 for (FileItem f:fileItems){65 if(!f.isFormField()){//判断是否是普通表单域,如果是普通表单域则解析不了66 File file=new File("D:\\upload\\"+ UUID.randomUUID()+f.getName().substring(f.getName().lastIndexOf(".")));67 f.write(file);68 sign++;69 json.put("data",sign);70 }else {71 System.out.println("表单名:"+f.getFieldName()+" 输入值:"+f.getString("UTF-8"));72 }73 }74 } catch (FileUploadException e) {75 e.printStackTrace();76 } catch (Exception e){77 e.printStackTrace();78 }79 }80 out.write(json.toString());81 82 }83 }
监听器MyProgressListener类代码:
1 package test; 2 3 import org.apache.commons.fileupload.ProgressListener; 4 5 import javax.servlet.http.HttpServletRequest; 6 import javax.servlet.http.HttpSession; 7 import java.text.NumberFormat; 8 9 10 public class MyProgressListener implements ProgressListener {11 12 private HttpSession session;13 public MyProgressListener(HttpServletRequest request){14 session = request.getSession();15 }16 17 @Override18 public void update(long pBytesRead, long pContentLength, int pItems) {19 //将数据进行格式化20 //已读取数据由字节转换为M21 double readM=pBytesRead/1024.0/1024.0;22 //已读取数据由字节转换为M23 double totalM=pContentLength/1024.0/1024.0;24 //已读取百分百25 double percent=readM/totalM;26 27 //格式化数据28 //已读取29 String readf=dataFormat(pBytesRead);30 //总大小31 String totalf=dataFormat(pContentLength);32 //进度百分百33 NumberFormat format=NumberFormat.getPercentInstance();34 String progress=format.format(percent);35 36 //将信息存入session37 session.setAttribute("progress", progress);38 39 //打印消息到控制台40 System.out.println("pBytesRead===>"+pBytesRead);41 System.out.println("pContentLength==>"+pContentLength);42 System.out.println("pItems===>"+pItems);43 System.out.println("readf--->"+readf);44 System.out.println("totalf--->"+totalf);45 System.out.println("progress--->"+progress);46 }47 48 /**49 * 格式化读取数据的显示50 * @param data 要格式化的数据 单位byte51 * @return 格式化后的数据,如果小于1M显示单位为KB,如果大于1M显示单位为M52 */53 public String dataFormat(double data){54 String formdata="";55 if (data>=1024*1024) {//大于等于1M56 formdata=Double.toString(data/1024/1024)+"M";57 }else if(data>=1024){//大于等于1KB58 formdata=Double.toString(data/1024)+"KB";59 }else{//小于1KB60 formdata=Double.toString(data)+"byte";61 }62 return formdata.substring(0, formdata.indexOf(".")+2);63 }64 }