文件上传---动作条
利用Apache commons fileupload上传文件，直接显示其完成的进度条。----示例代码源自《JAVA WEB王者归来》
1 首先要显示动作条要利用Ajax的异步请求，使得在没有完成时，不会刷新本页，而是局部的刷新。如果没有指定form的定向页面，默认是刷新本页，正常我们提交一个form刷新本页，在没有完成请求前是显示空白的网页，这里我们指定他刷新一个不显示的区域，就要用到form的属性target。
<iframe name=uploadiframe width=0 height=0></iframe> <form action="servlet/ProgressUploadServlet" method="post" enctype="multipart/form-data" target="uploadiframe" onsubmit="showStatus();"> <input type="file" name="file1" style="width:350px;"/><br/> <input type="file" name="file2" style="width:350px;"/><br/> <input type="file" name="file3" style="width:350px;"/><br/> <input type="submit" value="submit" id="btnSubmit"/> </form>
2 我们创建一个status的bean，用来保存一些状态信息，比如名字，读取的长度，读取的字节大小，时间等等。
public class UploadStatus { private long bytesRead; 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; } }
3 创建一个监听器实时的获取状态信息
public class UploadListener implements ProgressListener { private UploadStatus status; public UploadListener(UploadStatus status){ this.status = status; } public void update(long bytesRead,long contentLength,int items){ status.setBytesRead(bytesRead); status.setContentLength(contentLength); status.setItems(items); } }
4 form表单用pos方法提交后，在doPost里面获取状态信息，保存到session中。在本页面，在自动用get方法读取session中的信息，返回给网页，网页动态的进行数据的显示。
doPost
UploadStatus status = new UploadStatus(); UploadListener listener = new UploadListener(status); request.getSession(true).setAttribute("uploadStatus",status); ServletFileUpload upload = new ServletFileUpload(new DiskFileItemFactory()); upload.setProgressListener(listener);
doGet
long startTime = status.getStartTime(); long currentTime = System.currentTimeMillis(); long time = (currentTime - startTime)/1000 + 1; double velocity = ((double)status.getBytesRead())/(double)time; double totalTime = status.getContentLength()/velocity; double timeLeft = totalTime - time; int percent = (int)(100*(double)status.getBytesRead()/(double)status.getContentLength()); double length = ((double)status.getBytesRead())/1024/1024; double totalLength = ((double)status.getContentLength())/1024/1024; String value = percent +"||" + length + "||" +totalLength+"||"+ velocity+"||"+time+"||"+totalTime+"||"+timeLeft+"||"+status.getItems(); response.getWriter().println(value);
js
<script type="text/javascript">
var finished = true;
function $(obj){
return document.getElementById(obj);
}
function showStatus(){
finished = false;
$('status').style.display = 'block';
$('progressBarItem').style.width = '1%';
$('btnSubmit').disabled = true;
setTimeout("requestStatus()",1000);
}
function requestStatus(){
if(finished) return;
var req = createRequest();
req.open("GET","servlet/ProgressUploadServlet");
req.onreadystatechange = function(){callback(req);}
req.send(null);
setTimeout("requestStatus()",1000);
}
function createRequest(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
return null;
}
function callback(req){
if(req.readyState == 4){
if(req.status != 200){
debug("error! req.status:"+req.status+"");
return ;
}
debug("status.jsp return value:"+req.responseText);
var ss = req.responseText.split("||");
$('progressBarItem').style.width = ''+ss[0]+'%';
$('statusInfo').innerHTML = 'end of total:'+ss[0] +'%<br/>'+
'sucess of numbers:'+ss[1]+'<br/>'+
'length of file:'+ss[2]+'<br/>'+
'velocity of trans:'+ss[3]+'<br/>'+
'the time used:'+ss[4]+'<br/>'+
'total time:'+ss[5]+'<br/>'+
'other time:'+ss[6]+'<br/>'+
'which is translating:'+ss[7];
if(ss[1] == ss[2]){
finished = true;
$('statusInfo').innerHTML += "<br/><br/><br/>have done!";
$('btnSubmit').disabled = false;
}
}
}
function debug(obj){
var div = document.createElement("DIV");
div.innerHTML = "[debug]:"+obj;
document.body.appendChild(div);
}
</script>
全部代码：
progressFileupload.jsp
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <% 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>My JSP 'progressFileupload.jsp' starting page</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="styles.css"> --> <style type="text/css"> #progressBar {width:400px;height:12px;background:#FFFFFF;border:1px solid #000000;padding:1px} #progressBarItem{width:30%;height:100%;background:#FF0000;} </style> </head> <body> <iframe name=uploadiframe width=0 height=0></iframe> <form action="servlet/ProgressUploadServlet" method="post" enctype="multipart/form-data" target="uploadiframe" onsubmit="showStatus();"> <input type="file" name="file1" style="width:350px;"/><br/> <input type="file" name="file2" style="width:350px;"/><br/> <input type="file" name="file3" style="width:350px;"/><br/> <input type="submit" value="submit" id="btnSubmit"/> </form> <div id="status" style="display:none;"> uploadbar: <div id="progressBar"><div id="progressBarItem"></div></div> <div id="statusInfo"></div> </div> <script type="text/javascript"> var finished = true; function $(obj){ return document.getElementById(obj); } function showStatus(){ finished = false; $('status').style.display = 'block'; $('progressBarItem').style.width = '1%'; $('btnSubmit').disabled = true; setTimeout("requestStatus()",1000); } function requestStatus(){ if(finished) return; var req = createRequest(); req.open("GET","servlet/ProgressUploadServlet"); req.onreadystatechange = function(){callback(req);} req.send(null); setTimeout("requestStatus()",1000); } function createRequest(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else{ try{ return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ return new ActiveXObject("Microsoft.XMLHTTP"); } } return null; } function callback(req){ if(req.readyState == 4){ if(req.status != 200){ debug("error! req.status:"+req.status+""); return ; } debug("status.jsp return value:"+req.responseText); var ss = req.responseText.split("||"); $('progressBarItem').style.width = ''+ss[0]+'%'; $('statusInfo').innerHTML = 'end of total:'+ss[0] +'%<br/>'+ 'sucess of numbers:'+ss[1]+'<br/>'+ 'length of file:'+ss[2]+'<br/>'+ 'velocity of trans:'+ss[3]+'<br/>'+ 'the time used:'+ss[4]+'<br/>'+ 'total time:'+ss[5]+'<br/>'+ 'other time:'+ss[6]+'<br/>'+ 'which is translating:'+ss[7]; if(ss[1] == ss[2]){ finished = true; $('statusInfo').innerHTML += "<br/><br/><br/>have done!"; $('btnSubmit').disabled = false; } } } function debug(obj){ var div = document.createElement("DIV"); div.innerHTML = "[debug]:"+obj; document.body.appendChild(div); } </script> </body> </html>
UploadStatus.java
package com.test.temp; public class UploadStatus { private long bytesRead; 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; } }
UploadListener.java
package com.test.temp; import org.apache.commons.fileupload.ProgressListener; public class UploadListener implements ProgressListener { private UploadStatus status; public UploadListener(UploadStatus status){ this.status = status; } public void update(long bytesRead,long contentLength,int items){ status.setBytesRead(bytesRead); status.setContentLength(contentLength); status.setItems(items); } }
PorgressUploadServlet.java
package com.test.hello; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.io.PrintWriter; 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 org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import com.test.temp.UploadListener; import com.test.temp.UploadStatus; public class ProgressUploadServlet extends HttpServlet { /** * Constructor of the object. */ public ProgressUploadServlet() { super(); } /** * Destruction of the servlet. <br> */ public void destroy() { super.destroy(); // Just puts "destroy" string in log // Put your code here } /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setHeader("Cache-Control","no-store"); response.setHeader("Pragrma","no-cache"); response.setDateHeader("Expires",0); UploadStatus status = (UploadStatus) request.getSession(true).getAttribute("uploadStatus"); if(status == null){ response.getWriter().println("没有上传信息"); return; } long startTime = status.getStartTime(); long currentTime = System.currentTimeMillis(); long time = (currentTime - startTime)/1000 + 1; double velocity = ((double)status.getBytesRead())/(double)time; double totalTime = status.getContentLength()/velocity; double timeLeft = totalTime - time; int percent = (int)(100*(double)status.getBytesRead()/(double)status.getContentLength()); double length = ((double)status.getBytesRead())/1024/1024; double totalLength = ((double)status.getContentLength())/1024/1024; String value = percent +"||" + length + "||" +totalLength+"||"+ velocity+"||"+time+"||"+totalTime+"||"+timeLeft+"||"+status.getItems(); response.getWriter().println(value); } /** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { UploadStatus status = new UploadStatus(); UploadListener listener = new UploadListener(status); request.getSession(true).setAttribute("uploadStatus",status); ServletFileUpload upload = new ServletFileUpload(new DiskFileItemFactory()); upload.setProgressListener(listener); try{ List itemList = upload.parseRequest(request); for(Iterator it = itemList.iterator();it.hasNext();){ FileItem item = (FileItem)it.next(); if(item.isFormField()){ System.out.println("FormField:"+item.getFieldName()+"="+item.getString()); }else{ System.out.println("File:"+item.getName()); String fileName = item.getName().replace("/","\\"); fileName = fileName.substring(fileName.lastIndexOf("\\")); File saved = new File("D:\\upload_temp",fileName); saved.getParentFile().mkdirs(); InputStream ins = item.getInputStream(); OutputStream ous = new FileOutputStream(saved); byte[] tmp = new byte[1024]; int len = -1; while((len = ins.read(tmp)) != -1){ ous.write(tmp,0,len); } ous.close(); ins.close(); response.getWriter().println("已保存文件："+saved); } } }catch(Exception e){ response.getWriter().println("上传发生错误:"+e.getMessage()); } // response.setContentType("text/html"); // PrintWriter out = response.getWriter(); // out // .println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">"); // out.println("<HTML>"); // out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>"); // out.println(" <BODY>"); // out.print(" This is "); // out.print(this.getClass()); // out.println(", using the POST method"); // out.println(" </BODY>"); // out.println("</HTML>"); // out.flush(); // out.close(); } /** * Initialization of the servlet. <br> * * @throws ServletException if an error occurs */ public void init() throws ServletException { // Put your code here } }
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>PostServlet</servlet-name> <servlet-class>com.test.hello.PostServlet</servlet-class> </servlet> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>test</servlet-name> <servlet-class>com.test.hello.test</servlet-class> </servlet> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>UploadServlet</servlet-name> <servlet-class>com.test.hello.UploadServlet</servlet-class> </servlet> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>ProgressUploadServlet</servlet-name> <servlet-class>com.test.hello.ProgressUploadServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>PostServlet</servlet-name> <url-pattern>/servlet/PostServlet</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>test</servlet-name> <url-pattern>/servlet/test</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>UploadServlet</servlet-name> <url-pattern>/servlet/UploadServlet</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>ProgressUploadServlet</servlet-name> <url-pattern>/servlet/ProgressUploadServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
运行结果：
、
