Java DWR Extjs Servlet 文件上传 进度条

上一篇博文里面详细介绍了Java Servlet 文件上传，这篇博文将为文件上传添加进度条，其中会利用DWR和Extjs。

1、项目的结构图



（1）要导入相应的JAR包和EXTJS文件。

（2）FileProgressListener

package com.fileupload;

import java.util.Collection;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.ProgressListener;
import org.directwebremoting.ScriptBuffer;
import org.directwebremoting.ScriptSession;
import org.directwebremoting.ServerContext;
import org.directwebremoting.ServerContextFactory;
import org.directwebremoting.WebContext;
import org.directwebremoting.WebContextFactory.WebContextBuilder;
import org.directwebremoting.impl.DefaultWebContextBuilder;

public class FileProgressListener implements ProgressListener {
private long last_percentage = 0;
private long percentage = 0;
private HttpServletRequest request;
private HttpServletResponse response;

public FileProgressListener(HttpServletRequest request, HttpServletResponse response){
this.request = request;
this.response = response;
}

public void update(long pBytesRead, long pContentLength, int pItems) {
percentage = (pBytesRead * 100) / pContentLength;
if(percentage > 0 && percentage % 5 == 0 && percentage > last_percentage){
last_percentage = percentage;
System.out.println("已完成"+percentage+"%,文件大小是："+pContentLength);
updateProgress(percentage);
}
}

/**
* 向页面index.jsp推送文件上传完成的百分比，推送到方法refreshProgress中。
* @param percentage
*/
public void updateProgress(long percentage){
ScriptBuffer scriptBuffer = new ScriptBuffer();
scriptBuffer.appendScript("try{");
scriptBuffer.appendScript("if(refreshProgress){");
scriptBuffer.appendScript("refreshProgress");
scriptBuffer.appendScript("(");
scriptBuffer.appendData(percentage);
scriptBuffer.appendScript(")}");
scriptBuffer.appendScript("} catch(e){alert(e)}");

ServerContext sc = ServerContextFactory.get();
WebContextBuilder webBuilder = new DefaultWebContextBuilder();
webBuilder.engageThread(sc.getContainer(), request, response);
WebContext webContext = webBuilder.get();
if(webContext == null){
return;
}

Collection<ScriptSession> sessions = webContext.getScriptSessionsByPage("/FileUpload/index.jsp");
if (sessions == null || sessions.isEmpty()) {
return;
}

for (ScriptSession scriptSession : sessions) {
if (scriptSession != null) {
scriptSession.addScript(scriptBuffer);
}
}
}

public void setPercentage(long percentage) {
this.percentage = percentage;
}

public long getPercentage() {
return percentage;
}

}

（3）UpLoadServlet

package com.fileupload;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
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;

public class UpLoadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
//上传文件最大为100M
private static final int FILE_MAX_SIZE = 100 * 1024 * 1024;
//设定阀值1M，如果超过这个值，则文件就直接写到临时文件，不会一直占用内存
//利用这个特性可在上传大文件的时候不会占用大量内存，可以提高并发使用量。
private static final int THRESHOLD_SIZE = 1024 * 1024;

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
DiskFileItemFactory df = new DiskFileItemFactory();
df.setSizeThreshold(THRESHOLD_SIZE);
String result = "";
try {
File f = new File("E:\\temp");
if (!f.exists()) {
f.mkdirs();
}

df.setRepository(f);
ServletFileUpload sf = new ServletFileUpload(df);
sf.setFileSizeMax(FILE_MAX_SIZE);

FileProgressListener fileProgressListener = new FileProgressListener(request, response);
sf.setProgressListener(fileProgressListener);
List list = null;
try {
list = sf.parseRequest(request);
} catch (Exception e) {
e.printStackTrace();
result = "上传失败："+e.getMessage();
}

if(list != null && !list.isEmpty()){
for (int i = 0; i < list.size(); i++) {
FileItem fileItem = (FileItem) list.get(i);
String fileName = fileItem.getName();
if(fileName == null || "".equals(fileName.trim())){
continue;
}

File ff = new File("E:\\files");
if (!ff.exists()) {
ff.mkdirs();
}

File f2 = new File(ff, fileName);
fileItem.write(f2);
result = "上传成功";
}
}
} catch (Exception e) {
e.printStackTrace();
result = "上传失败："+e.getMessage();
}

response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.println("<script>");
out.println("alert('"+result+"');");
out.println("</script>");
out.flush();
out.close();
}

}

（4）log4j.properties

这个是日志配置文件，用来打印系统日志的。

#stdout
log4j.rootLogger=INFO ,stdout

#Console
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target=System.out
log4j.appender.stdout.Threshold =INFO
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss} %5p %c{1}:%L - %m%n

（5）dwr.xml

这是DWR的配置文件，用于配置BEAN其他业务类，暂时没用到，所以就没配置什么东西，本文使用DWR主要是使用它的推送功能，来动态更新进度条。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">
<dwr>
<allow>
</allow>
</dwr>

（6）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"> <welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>

<servlet>
<servlet-name>Upload</servlet-name>
<servlet-class>com.fileupload.UpLoadServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>Upload</servlet-name>
<url-pattern>/dwr/fileupload</url-pattern>
</servlet-mapping>

<servlet>
<servlet-name>dwr</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>crossDomainSessionSecurity</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>allowScriptTagRemoting</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>activeReverseAjaxEnabled</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>pollAndCometEnabled</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>initApplicationScopeCreatorsAtStartup</param-name>
<param-value>true</param-value>
</init-param>
<!-- polling方式：在comet方式的基础之上，再配置以下参数 -->
<init-param>
<param-name>org.directwebremoting.extend.ServerLoadMonitor</param-name>
<param-value>org.directwebremoting.impl.PollingServerLoadMonitor</param-value>
</init-param>
<!-- 毫秒数。页面默认的请求间隔时间是5秒 -->
<init-param>
<param-name>disconnectedTime</param-name>
<param-value>100</param-value>
</init-param>
<init-param>
<param-name>maxWaitAfterWrite</param-name>
<param-value>500</param-value>
</init-param>
<load-on-startup>4</load-on-startup>
</servlet>

<servlet-mapping>
<servlet-name>dwr</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>

（7）index.jsp

<%@ 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="styles.css">
-->

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/ext-3.2.1.1/resources/css/ext-all.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/ext-3.2.1.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ext-3.2.1.1/ext-all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ext-3.2.1.1/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/dwr/engine.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/dwr/util.js"></script>

<script type="text/javascript">
dwr.engine.setActiveReverseAjax(true);//开启DWR的推送功能
</script>

<script type="text/javascript" language="javascript">

<script type="text/javascript">
Ext.onReady(function(){
var formPanel = new Ext.FormPanel({
renderTo: Ext.getBody(),
title: '上传文件',
fileUpload:true,
items:[ {
xtype: 'textfield',
id: 'file',
fieldLabel: '选择文件',
inputType: 'file',
buttonText: '浏览',
width: 258
},
{
text: "上传",
xtype: "button",
handler:function(){
var file = Ext.getCmp("file");
if(file.getValue() == ''){
Ext.MessageBox.alert('提示', '请选择文件!');
return;
}

var win = new Ext.Window({
title: "进度条",
autoScroll: true,
width: Ext.lib.Dom.getViewWidth() > 650 ? 650 : Ext.lib.Dom.getViewWidth() - 100,
autoHeight: true,
closable: true,
layout: 'fit',
items: [
new Ext.ProgressBar({
id: 'progresBar',
anchor: '100%',
listeners: {
afterrender: function(b) {
b.progressBar.setHeight(18);
}
}
})
]
});

win.show();
formPanel.form.submit({
url: 'dwr/fileupload',
method: "POST",
success: function(form, action) {
alert("success");
win.close();
},
failure:function(form,action){
alert("failure");
win.close();
}
});
}
}]
});
});
function refreshProgress(percentage) {
Ext.getCmp('progresBar').updateProgress(parseFloat(percentage)/100,
'已完成' + parseInt(percentage) + '%', true);
}
</script>
</head>
<body>
</body>
</html>

2、系统运行结果

（1）上传页面



（2）文件上传中



（3）文件上传完成



3、总结

本文使用DWR+EXTJS+Servlet+commons_fileupload基本实现了上传文件的功能，并且附带进度条，但也有一些缺陷。

3.1、没有判断文件的大小

如果文件超过限制则会上传失败（需要上传超过大小限制后才抛出异常），没有在页面上或Servlet中做判断。

要获取文件的大小有两种：

（1）、修改浏览器的安全配置，通过ActiveXObject获取。

但这会影响影响浏览器的安全性。

<script type="text/javascript" language="javascript">
//获取文件大小
function getFileSize(fileName)
{
if(document.all)
{
var fso = new ActiveXObject('Scripting.FileSystemObject');
var file = fso.GetFile(fileName);
var size = file.Size;
var size_str = "";
if(size > 1024*1024*1024){
size_str=size/(1024*1024*1024)+"G";
}else if(size > 1024*1024){
size_str=size/(1024*1024)+"M";
}else if(size > 1024){
size_str=size/(1024)+"K";
}else{
size_str=size + "B";
}
return size_str;
}
}
</script>

（2）、利用FLASH获取。

这是网上的说法，以后再慢慢摸索。

3.2 不支持上传大文件

如果文件的大小超过500M，则很可能上传失败。

3.3 不支持断点续传

如果上传的过程中出现问题导致中断，再次上传时并不支持断点续传。