GooUploader 控件实现上传文件

要实现多文件上传，也就是批量上传文件。之前批量上传的做法是利用js或jquery来动态添加删除<input type="file" name="file" />的感觉这样 用户体验不太好，在网上搜了半天 得到GooUploader这个控件，感觉还不错 ！

可设定为是否单个上传,或者是批量上传;
可在上传过程中取消上传(单个或者批量取消);
在批量选择文件后,可以手工选择上传其中部分文件;
可在上传文件时顺带上传REQUEST传参,如SESSION_ID;
选择批量文件,在上传前,用户还可删除其中几个不想上传的文件;
本控件内置一个保存了文件列表信息的数组$fileList，其单元为JSON对象，保存了每个文件的ID，名称，类型，大小等信息；
可自定义按钮显示文字，文件上传的服务器端地址，以及SWF控件相对于当前网页的相对路径
本个控件包是建立在JSP基础上为大家展示上传效的，但实际该控件有用的部分仅在客户端前台;后台代码可以全部推翻，重新用PHP，.NET等其它动态语言编写
使用了本控件后，在后台编写代码时，不必编写实时监控文件上传进度的复杂代码，只用编写简单的处理保存上传文件的代码即可，因为FLASH插件会自动帮助算出上传进度，并实时定时给控件提供进度显示数据，这样就减轻了后台开发人员的工作量；
基于上一点，本控件前台也不会以长轮询方式访问服务器端，以获取文件上传进度情况，而是自己定时计算以上传的字节总数。因此当上传一个文件时，FLASH插件只会发一次传输请求，这样就改善了效率。

本控件兼容IE6--IE8,Firefox,chrome浏览器，但需要FLASH PLAYER 9版本以上的支持

 我用两种方式一种springmvc 一种 servlet 废话多说了 直接看效果

项目结构如下：

1、servlet实现代码

package com.hosenses.filemanage.action;import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItemIterator;import org.apache.commons.fileupload.FileItemStream;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;import org.apache.commons.fileupload.util.Streams;/** * Servlet implementation class */public class ServletUpload extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {try {// 设置编码request.setCharacterEncoding("UTF-8");// 判断文件上传内容信息if (ServletFileUpload.isMultipartContent(request)) {// 当文件比较 多事 直接保存到内存中DiskFileItemFactory dff = new DiskFileItemFactory();// 临时保存路径// dff.setRepository(this.tmpDir);// 文件内容大小dff.setSizeThreshold(1024000);// 文件上传ServletFileUpload sfu = new ServletFileUpload(dff);sfu.setFileSizeMax(109999999L);sfu.setSizeMax(999999999L);FileItemIterator fii = sfu.getItemIterator(request);// 文件保存路径// 获取文件 存储位置String realPath = request.getSession().getServletContext().getRealPath("/uploadFile");while (fii.hasNext()) {FileItemStream fis = fii.next();if ((!fis.isFormField()) && (fis.getName().length() > 0)) {System.out.println("文件名字：" + fis.getName() + "文件大小；"+ fis.getFieldName());String fileName = fis.getName();BufferedInputStream in = new BufferedInputStream(fis.openStream());BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(new File(realPath + "\\"+ fileName)));Streams.copy(in, out, true);}}response.getWriter().println("File upload successfully!!!");}} catch (Exception e) {e.printStackTrace();}}}

2、springmvc实现

package com.hosenses.filemanage.action;import java.io.File;import java.io.IOException;import java.util.Iterator;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import org.springframework.web.multipart.MultipartHttpServletRequest;import org.springframework.web.multipart.commons.CommonsMultipartResolver;import org.springframework.web.multipart.support.DefaultMultipartHttpServletRequest;@Controllerpublic class FileCollont {/** * 上传方法 * @param request * @param response * @throws IllegalStateException * @throws IOException */@RequestMapping("/upload.act")@ResponseBodypublic void uploadFile(HttpServletRequest request,HttpServletResponse response) throws IllegalStateException, IOException {  request.setCharacterEncoding("utf-8");//创建一个通用的多部分解析器          CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());          //判断 request 是否有文件上传,即多部分请求          if(multipartResolver.isMultipart(request)){              //转换成多部分request                MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request;                         //取得request中的所有文件名              Iterator<String> iter = multiRequest.getFileNames();              //获取文件 存储位置              String realPath = request.getSession().getServletContext()                      .getRealPath("/uploadFile");              System.out.println(realPath);            File pathFile = new File(realPath);              if (!pathFile.exists()) {                  //文件夹不存 创建文件                  pathFile.mkdirs();              }              while(iter.hasNext()){                  //取得上传文件                  MultipartFile file = multiRequest.getFile(iter.next());                  if(file != null){                      //取得当前上传文件的文件名称                      String myFileName = file.getOriginalFilename();                    //copy到服务器上                    file.transferTo(new File(realPath + "/" + file.getOriginalFilename()));                      System.out.println(myFileName);                }              }                        }      }  @RequestMapping("/gooUploader.act")@ResponseBodypublic void gooUploader(HttpServletRequest request){try {DefaultMultipartHttpServletRequest mulRequest = (DefaultMultipartHttpServletRequest) request;List<MultipartFile> multipartFileList = mulRequest.getFiles("Filedata");//创建上传类  创建一个磁盘工厂ServletFileUpload fileUpload = new ServletFileUpload(new DiskFileItemFactory());//设置上传编码fileUpload.setHeaderEncoding("utf-8");Iterator<MultipartFile> it = multipartFileList.iterator();//获取文件 存储位置              String realPath = request.getSession().getServletContext()                      .getRealPath("/uploadFile");              System.out.println(realPath);            File pathFile = new File(realPath);              if (!pathFile.exists()) {                  //文件夹不存 创建文件                  pathFile.mkdirs();              }    while(it.hasNext()){                  //取得上传文件                  MultipartFile file = it.next();                  if(file != null){                      //取得当前上传文件的文件名称                      String myFileName = file.getOriginalFilename();                    //copy到服务器上                    file.transferTo(new File(realPath + "/" + file.getOriginalFilename()));                      System.out.println(myFileName);                }              }  }catch(Exception e){e.printStackTrace();}}}

3、html代码

<%@ 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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>文件上传控件GooUploader</title><link rel="stylesheet" type="text/css" href="codebase/GooUploader.css" /><script type="text/javascript" src="codebase/jquery-1.3.2.min.js"></script><script type="text/javascript" src="codebase/GooUploader.js"></script><script type="text/javascript" src="codebase/swfupload/swfupload.js"></script><script type="text/javascript">  var demo;  //var  post_params = {session_id:"f1423rwe543t4wrtwerwe"};  //构造函数 参数var property={      width:700,  //控件的宽度，默认时可不填    height:300,  //控件的高度，默认时可不填    multiple:true,  //如果它为TRUE，则允许批量上传，如为FALSE，则为只允许单个文件一传    file_post_name : "Filedata",      file_types:"*.jpg;*.gif",  //可上传的文件类型，“如*.jpg;*.gif”，默认为“*.*”，用分号隔开  //  file_types_description: "Web Image Files",     // post_params:post_params,   //一个JSON数据，文件上传时一同传至服务器端的REUQUEST传参    btn_add_text:"添加",  //添加按钮显示文字    btn_up_text:"上传",   //上传按钮显示文字（当multiple为FALSE时，此项无作作，不必填）    btn_cancel_text:"放弃", //取消按钮显示文字（当multiple为FALSE时，此项无作作，不必填）     btn_clean_text:"清空",   //清空按钮显示文字（当multiple为FALSE时，此项无作作，不必填）    op_del_text:"单项删除",  //文件列表中快捷操作图标“单项删除”的注释文字    op_up_text:"单项上传",  //文件列表中快捷操作图标“单项上传”的注释文字    op_fail_text:"上传失败",  //文件列表中快捷操作图标“上传失败”的注释文字    op_ok_text:"上传成功",  //文件列表中快捷操作图标“上传成功”的注释文字    op_no_text:"取消上传",   //文件列表中快捷操作图标“取消上传”的注释文字    upload_url:'<%=basePath%>ServletUpload',  //上传目标服务器的相对路径，比必须是相对于SWF插件所在的路径，或者是绝对路径    flash_url :"codebase/swfupload.swf", //property.flash_url||"swfupload.swf"SWF插件相对于网页文件所在相对路径  //  file_size_limit : file_size_limit||0,//文件大小限制，单位为KB，0表示大小无限制  //file_upload_limit: file_upload_limit||0,//允许上传的最多文件数量,0表示大小无限制  //  file_queue_limit:property.file_queue_limit||0,};  $(document).ready(function(){    demo=$.createGooUploader($("#demo"),property)  ;});  </script></head><body><div id="demo"></div></body></html>

GooUploader 包下载地址：http://download.csdn.net/detail/itlqi/8871333

以上项目下载地址 不含jar：http://download.csdn.net/detail/itlqi/8871339