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;
	}

}

评论

30 楼 请叫我东哥 2014-07-10  

需要翻编译？看不到后台代码

29 楼 cc_01 2014-04-08  

 

28 楼 chenlin10058 2013-09-06  

请问楼主，为什么在IE6中，toolbar的第一个按钮，也就是”添加文件“按钮，点击不动，像被什么东西遮罩了一样，无法弹框选文件！
用的extjs2.0版本！
盼回复~

27 楼 xgwfhn 2013-05-26  

SCRIPT5009: “__flash__removeCallback”未定义   老是报这个错误  怎么解决呢

26 楼 walnuting 2013-01-16  

请问这个是基于hadoop的吗

25 楼 zhangyezeng 2012-03-12  

我再详细的说一下啊，就是那个限制文件类型的时候fileTypes后面若是协议中扩展名如'*.flv'这个是可以生效的，但是如果两种以上扩展名'*.flv,*.mp4'就什么文件也看不到了，这是怎么回事儿啊，是不是不能匹配多扩展名啊？求解，太感谢啦

24 楼 zhangyezeng 2012-03-12  

我有个问题，选择文件格式的时候只能协议中扩展名，若是写两种以上的话就什么文件也看不到了，难道只能匹配一种扩展名？

23 楼 yourgame 2012-02-08  

jy0902 写道

首先灰常滴   主分享！！
    然后告诉大家  如果点击不能和后台交互的话  把swfupload.js 的文件换掉  网上有得下！！！！ 貌似楼主的这个文件出了点问题， 我把这个文件换了就顺利能后后台交互了！我是用来上传视频的  把strut配置在改下  视频文件上传成功！！

这个在当初发布的时候，浏览器都支持的，现在也不知道是什么个情况了，年代已久

22 楼 jy0902 2012-02-06  

首先灰常滴   主分享！！
    然后告诉大家  如果点击不能和后台交互的话  把swfupload.js 的文件换掉  网上有得下！！！！ 貌似楼主的这个文件出了点问题， 我把这个文件换了就顺利能后后台交互了！我是用来上传视频的  把strut配置在改下  视频文件上传成功！！

21 楼 咸鱼干 2011-10-13  

为什么我点击上传后，没有和后台交互呢？我是用的spring的MVC写的，我也尝试过用联servlet但还是后台没反应，也没有报错，请楼主帮我解决，不胜感激！

20 楼 Sq_I 2011-08-31  

为什么我照着写了却什么都没有出来？

19 楼 liukaibernard 2011-07-20  

怎么 点击上传后，没有与后天进行交互喃？  请问是什么原因？

18 楼 shawnfree 2011-04-07  

解决下问题呀 在google 浏览器和火狐 问什么不能到 Action 呢？？？？

17 楼 shawnfree 2011-04-07  

还有问题 问什么在 google 浏览器 和 火狐浏览器中 不会到 Action 方法中
会自动 跳到 no_login.jsp 页面 使我丢了什么参数吗？
我已经登录了。这个怎么解决呢？

16 楼 shawnfree 2011-04-07  

问 什么 在IE下 我关闭后在打开 “添加文件” 按钮就没反映了 怎么解决呢？能说下吗？

15 楼 thisisnoman 2011-02-20  

为什么我在.net下运行，上传文件时会停住呢？代码没有改动过，运行环境为visual 2008

（上传不了图片？。。。）

14 楼 uatoily 2010-12-07  

上传时文件大小好象有限制，大于8M都无法上传？

13 楼 yuermeizi 2010-11-29  

ff bug 

添加样式：

.swfupload{position: absolute; top: 0pt; left: -2px;}

12 楼 chridll 2010-10-07  

postParams : {  
                path : 'files\\' // 上传到服务器的files目录下面  
            }  

可以传中文参数吗？我的就传不到后台，获得的值为NULL，字母或数字就可以

11 楼 yourgame 2010-09-21  

yushi103 写道

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

其实在"添加文件"按钮上面有一个flash,他是透明的,通过点击来触发选择对话框,如果弹不出对话框只有一种原因,那就是你flash文件的路径不正确,你可以尝试在相关代码的地方使用flash的绝对路径即可