jquery+alanx+fileupload上传组件

     最近闲着没事就找了些上传的东西，折腾下。折腾完SWFUpload就折腾下Alanx那个上传的东西，原有的是封装在一个jar中，使用标签，我觉得有点不爽，就给折腾了个jquery插件：

具体使用步骤：

一：引入必须的js文件和css文件：

<!--jquery1.4核心库-->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<!--alanx核心库-->
<script type="text/javascript"	src="core/swfobject.js"></script>
<!--自定义jquery插件vinAlanx的jquery插件js-->
<script type="text/javascript"	src="vinAlanx-1.0.js"></script>

二：在body中添加组件显示目标

<div id="vinEdit"></div>

三：在jqeury中初始化插件

<script type="text/javascript">
	$(function() {
		$("#vinEdit").vinAlanx({
            width : 500,
			heigth : 40,
			uploadURL:'/AlanXUploadServlet',
			expressInstallURL:'core/expressInstall.swf',
			alanxSwfURL:'core/AlanX.swf',
			extensionName:'*.*',
			extensionDisp:"AlanX上传组件",
			maxFileN:100,
			maxFileSize:1048576000,
			maxAllFileSize:10485760000,
			waitForProgress:false,
			errorContinue:true,
			showLogoTxt:false
		});
	});
</script>

参数说明：

width : 500,	插件显示区域宽度
heigth : 100,	插件显示区域高度
uploadURL:'/ AlanXUploadServlet ',	处理上传请求的服务器端脚本URL
expressInstallURL:" core/expressInstall.swf ",	expressInstall.swf的文件地址
alanxSwfURL:" core/AlanX.swf ",	AlanX.swf的文件地址
extensionName:"*.*",	允许上传的文件类型;如".xls;.doc";
extensionDisp:" AlanX上传组件",		显示在扩展名前
maxFileN:100,	允许上传的最大文件个数;
maxFileSize:104857600,	允许上传的最大文件大小(byte);(10M)
maxAllFileSize:1048576000,	允许上传的总文件最大值(byte);(100M)
waitForProgress:false,	上一个文件上传完毕后，是否马上开始上传下一个文件(默认false)，还是等待业务逻辑处理完之后（比如可能需要解析文件等业务过程），再开始下一个文件的上传(true)
errorContinue:true,	上传某一个文件出错，是否继续上传其他文件默认为true
showLogoTxt:false,	显示AlanX的logo及链接，默认为显示，当鼠标在组件右边悬停时，logo会显示，点击可以看到官方的帮助文档

有了上传插件，那肯定是要有处理上传的类的，举例使用servlet+fileupload：

package cn.alanx.upload.sample;

import java.io.File;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
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.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class AlanXUploadServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private static final String ALANX_UPLOAD_FOLDER = "AlanX_Upload_Folder";
	public  static final String ALANX_UPLOAD_SERVLET = "AlanXUploadServlet";
	public AlanXUploadServlet() {
		super();
	}

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		this.doPost(request, response);
	}

	@SuppressWarnings("unchecked")
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException {

		try {
			request.setCharacterEncoding("UTF-8");
		} catch (UnsupportedEncodingException e1) {
			e1.printStackTrace();
		}
		//磁盘文件条目工厂
		DiskFileItemFactory factory = new DiskFileItemFactory();

		// 文件上传如果文件小,上传组件可以将文件存放在内存中,如果过大时会放在临时目录里面,之后再通过IO流操作
		//获取目录真实路径   / 代表 WebRoot目录下面

		String path = request.getSession().getServletContext().getRealPath(
				"/"+ALANX_UPLOAD_FOLDER);
		System.out.println(path);
		File pathFile = new File(path);
		if (!pathFile.exists()) {
			pathFile.mkdir();
		}
		//设置临时目录
		factory.setRepository(new File(path));
		//设置上传文件大小

		factory.setSizeThreshold(1024 * 1024);
		//创建一个ServletFileUpload 实例 

		ServletFileUpload sfu = new ServletFileUpload(factory);
		try {
			//解析请求,取得FileItem 列表
			List<FileItem> lis = sfu.parseRequest(request);
			//循环遍历
			for (FileItem item : lis) {
				//判断是否是简单的表单字段
				if (item.isFormField()) {
					String name = item.getFieldName();
					String value = item.getString("UTF-8");
					request.setAttribute(name, value);
				} else {
					//取得字段名
					String name = item.getFieldName();
					//       取得文件路径名
					String value = item.getName();
					System.out.println(value);
					//为了屏蔽各个浏览器提供的路径不同异常
					int start = value.lastIndexOf("\\");
					//取得文件名
					String fileName = value.substring(start + 1);
					request.setAttribute(name, fileName);
					item.write(new File(path, fileName)); //这句代码与下面高亮显示的代表功能相同
				}
			}
		} catch (FileUploadException e) {
			e.printStackTrace();
		} catch (Exception e) {
			e.printStackTrace();
		}
		try {
			response.getWriter().print("success");
			response.getWriter().close();
		} catch (IOException e) {
			e.printStackTrace();
		}

	}

}

写好了处理类就是配置了：

web.xml中添加下面配置：
	<servlet>
		<description>AlanX.cn Batch Upload Sample</description>
		<display-name>AlanXUploadServlet</display-name>
		<servlet-name>AlanXUploadServlet</servlet-name>
		<servlet-class>cn.alanx.upload.sample.AlanXUploadServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>AlanXUploadServlet</servlet-name>
		<url-pattern>/AlanXUploadServlet</url-pattern>
	</servlet-mapping>

效果图预览