EXTJS 3.0 网狗盘之上传组件[开源]

自从EXTJS3.0发布后,很多同学后网友都要求我共享基于EXTJS3.0的多文件上传组件.我特地做了一个基于3.0和struts2的示例,特此奉上.
w_e_ibo:
http://t.cn/zjqEaRh  
http://weibo.com/liao27




//调用方法

Ext.onReady(function() {
	var win = new Ext.Window({
		title : '多文件上传示例',
		width : 500,
		height : 500,
		resizable : false,
		layout : 'fit',
		items : [{
			xtype : 'uploadpanel',
			uploadUrl : 'uploadFiles.action',
			filePostName : 'myUpload', // 这里很重要，默认值为'fileData',这里匹配action中的setMyUpload属性
			flashUrl : 'js/swfupload.swf',
			fileSize : '500 MB',
			height : 400,
			border : false,
			fileTypes : '*.*', // 在这里限制文件类型:'*.jpg,*.png,*.gif'
			fileTypesDescription : '所有文件',
			postParams : {
				path : 'files\\' // 上传到服务器的files目录下面
			}
		}],
		bbar : ['作者:廖瀚卿 | QQ:3990995 | 博客:http://yourgame.iteye.com']
	});

	win.show();
});

//BasicAction

package com.lhq.uploader;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class BaseAction extends ActionSupport {

	public String jsonString;

	public void outJsonString(String str) {
		getResponse().setContentType("text/javascript;charset=UTF-8");
		outString(str);
	}

	/*
	 * public void outJson(Object obj) {
	 * outJsonString(JSONObject.fromObject(obj).toString()); }
	 * 
	 * public void outJsonArray(Object array) {
	 * outJsonArray(JSONArray.fromObject(array).toString()); }
	 */

	public void outString(String str) {
		try {
			PrintWriter out = getResponse().getWriter();
			out.write(str);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	public void outXMLString(String xmlStr) {
		getResponse().setContentType("application/xml;charset=UTF-8");
		outString(xmlStr);
	}

	/**
	 * 获得request
	 * 
	 * @return
	 */
	public HttpServletRequest getRequest() {
		return ServletActionContext.getRequest();
	}

	/**
	 * 获得response
	 * 
	 * @return
	 */
	public HttpServletResponse getResponse() {
		return ServletActionContext.getResponse();
	}

	/**
	 * 获得session
	 * 
	 * @return
	 */
	public HttpSession getSession() {
		return getRequest().getSession();
	}

	/**
	 * 获得servlet上下文
	 * 
	 * @return
	 */
	public ServletContext getServletContext() {
		return ServletActionContext.getServletContext();
	}

	public String getRealyPath(String path) {
		return getServletContext().getRealPath(path);
	}
}

//FileAction

package com.lhq.uploader;

import java.io.File;
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import java.util.HashMap;
import java.util.Map;

/**
 * FileAction.java Create on 2008-12-18 上午09:16:22
 * 
 * 说明:文件处理
 * 
 * Copyright (c) 2008 by yourgame.
 * 
 * @author 廖瀚卿
 * @version 1.0
 */
@SuppressWarnings("serial")
public class FileAction extends BaseAction {
	private Map<String, Object> infos = new HashMap<String, Object>();

	public static final String ROOT = "upload\\";

	private File myUpload;

	private String myUploadContentType;

	private String myUploadFileName;

	private String path;

	private boolean success;

	/**
	 * 上传文件
	 * 
	 * @return
	 */
	public String uploadFiles() {
		String rootPath = getSession().getServletContext().getRealPath("/");
		rootPath += ROOT;
		String sp = rootPath + getPath();
		MyUtils.mkDirectory(sp);
		try {
			MyUtils.upload(getMyUploadFileName(), sp, getMyUpload());
			this.success = true;
		} catch (RuntimeException e) {
			e.printStackTrace();
		}
		return SUCCESS;
	}

	public File getMyUpload() {
		return myUpload;
	}

	public void setMyUpload(File myUpload) {
		this.myUpload = myUpload;
	}

	public String getMyUploadContentType() {
		return myUploadContentType;
	}

	public void setMyUploadContentType(String myUploadContentType) {
		this.myUploadContentType = myUploadContentType;
	}

	public String getMyUploadFileName() {
		return myUploadFileName;
	}

	public void setMyUploadFileName(String myUploadFileName) {
		this.myUploadFileName = myUploadFileName;
	}

	public boolean isSuccess() {
		return success;
	}

	public void setSuccess(boolean success) {
		this.success = success;
	}

	public String getPath() {
		return path;
	}

	public void setPath(String path) throws UnsupportedEncodingException {
		this.path = URLDecoder.decode(path, "UTF-8");
	}

	public Map<String, Object> getInfos() {
		return infos;
	}

	public void setInfos(Map<String, Object> infos) {
		this.infos = infos;
	}
}

//MyUtils.java

package com.lhq.uploader;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;

public class MyUtils {

	/**
	 * 上传文件
	 * 
	 * @param savePath
	 *            文件的保存路径
	 * @param uploadFile
	 *            被上传的文件
	 * @return newFileName
	 */
	public static String upload(String uploadFileName, String savePath, File uploadFile) {
		String newFileName = getUUIDName(uploadFileName, savePath);
		try {
			FileOutputStream fos = new FileOutputStream(savePath + newFileName);
			FileInputStream fis = new FileInputStream(uploadFile);
			byte[] buffer = new byte[1024];
			int len = 0;
			while ((len = fis.read(buffer)) > 0) {
				fos.write(buffer, 0, len);
			}
		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return newFileName;
	}

	public static String getUUIDName(String fileName, String dir) {
		String[] split = fileName.split("\\.");
		String extendFile = "." + split[split.length - 1].toLowerCase();
		return java.util.UUID.randomUUID().toString() + extendFile;
	}

	/**
	 * 根据路径创建一系列的目录
	 * 
	 * @param path
	 */
	public static boolean mkDirectory(String path) {
		File file = null;
		try {
			file = new File(path);
			if (!file.exists()) {
				return file.mkdirs();
			}
		} catch (RuntimeException e) {
			e.printStackTrace();
		} finally {
			file = null;
		}
		return false;
	}

}

评论

10 楼 yushi103 2010-09-20  

action里面创建文件夹的的部分代码，略有问题，不过很容易就可以改正了。
但是真的是不知道为什么，单独用这个小项目的时候，可以使用，但是把这个控件，加入到我自己的项目里面的时候就：“添加文件”按钮，死活没反应！？？？？？？
tbar : [{
text : '添加文件',
iconCls : 'db-icn-add'
}, {
这点，代码，实在是看不懂！怎么能实现的一个选择文件的窗口呢？？？？？
我用的是3.2版本，应该不是版本问题。

9 楼 hexin46373 2010-08-24  

感谢楼主分享这么好的案例 奉献精神可嘉 值得我们新手学习

8 楼 zdtwyjp 2010-07-30  

lixiaokui11 写道

添加文件功能怎么没有呢？

你好呀！你“添加文件”功能是怎么解决的呀？我的在FF中点击的时候没有反应？

7 楼 wanli 2010-06-08  

这个插件不借，不过希望楼主能提供一些详细的资料，方便新手学习。
顺便问下怎么设为模式窗口？

6 楼 dsf007 2010-05-09  

请问下界面上是如何获知文件上传进度以及传输速度等数据的？向后台轮询？
是否支持多用户同时上传呢?怎么保证每个用户看到的是自己的上传进度,而不是别人的呢?即保证每个用户之间的上传进度显示是相互独立的呢?

5 楼 leexiaodong2009 2010-05-01  

好像没有全部开源的。

4 楼 qbjshmilykm 2010-03-25  

请问这个SWFUpload能用在ext 2.x中吗？

3 楼 lixiaokui11 2010-03-23  

可以用，在js里没看见，不好意思

2 楼 lixiaokui11 2010-03-23  

添加文件功能怎么没有呢？

1 楼 younglibin 2010-01-08  

高手看看我的问题吧：http://www.iteye.com/topic/554759