最近的网站项目中需要实现上传pdf的功能，期间找了很多jquery的插件，都不能满足要求，最后找到GooUploader.js，由于自己是第一次接触上传文件的功能，虽然看了很多写地详细的博客，还是花了很长时间才应用到项目中，所以在这里自己总结一下。
GooUploader.js插件是在swfupload.js基础上进行扩展的，有些比较好的特点：
1. 支持批量文件上传；
2. 上传文件时，选择文件后，可以选择单个文件上传，也可以选择批量文件上传；
3. 开始上传文件后，可以取消单个文件上传，也可以取消批量文件上传；
4. 可以利用flash插件进行进度监视，不需要编写后台代码进行进度检测；
5. UI界面美观，可以自己定义每个按钮的显示文字；
6. 实现了异步刷新效果；
我的项目中使用插件的效果如下（图中“返回”按钮是我修改js文件后的效果，最后会介绍）：
下面开始介绍插件的具体使用方法：
1. 首先要引入插件所用的js文件，GooUploader.js、swfupload.js、jquery.min.js，jquery版本为1.5.2，版本过高可能会出现问题，这也是这个插件我觉得不太好用的部分，不能使用高版本的juery，也有可能是我自己没有调试好，这一部分没有做过多研究。css样式文件为GooUploader.css
2. 接着是定义一些插件的参数，代码如下：
var post_params = { folder : $($(t).next()).attr("id"), username : userInfo.userName }; var upload_property = { width : 300,//宽度 height : 300,//长度 multiple : true,//是否批量上传 file_types : "*.pdf",//文件过滤 post_params : post_params, btn_add_text : "添加",//对应按钮文字 btn_up_text : "上传", btn_cancel_text : "放弃", btn_clean_text : "清空", op_del_text : "单项删除", op_up_text : "单项上传", op_fail_text : "上传失败", op_ok_text : "上传成功", op_no_text : "取消上传", upload_url : "upload", flash_url : "/CloudPaper/swfupload.swf" };
一些属性的含义在注释中已经注明，很容易理解，需要着重说明的是调用后台函数的部分，我的项目中使用的是struts2框架，所以这里只介绍在struts2中的使用方法。代码中红色字体 "upload_url"处，为action的名字；"post_params"处，为需要传参的部分，而参数需要提前定义在变量中，格式在代码开始处，传参使用的是requset方式，所以后台参数获取为应使用对应方法。以下为我的项目中获取参数的方法。
String userName = request.getParameter("username");
String folderPath = request.getParameter("folder");
属性中还有一点需要注意，最后一个属性flash_url应填写一个swfupload.swf文件的路径，这是为了检测进度显示所用，但是因为GooUploader.js插件中定义了缺省值，所以这里建议写上自己的绝对路径，否则可能会出现路径找不到的问题，我在这里耗费不少时间。
3. 在页面中定义一个空的div，在调用生成函数即可，create_ret是返回结果，可以通过它获取一些属性，但我没用太多应用，这里不好做太多介绍，以免误导。函数的第一个参数为页面中的div对象，这里是通过取id的方式获取，后一个为上面定义过的属性。
var create_ret = $.createGooUploader($("#upload"),upload_property);
4. 接下来写后台文件，以下代码是我找到的大牛博客中的一段代码，做了一小部分修改，给重名文件在原名后加一个数字。
参考地址：http://blog.csdn.net/ocean_30/article/details/6747643
import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.FileReader; import java.io.FileWriter; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.util.List; import javax.servlet.ServletContext; import javax.servlet.http.HttpServletRequest; import org.apache.commons.io.FileUtils; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionSupport;
/** * @author fish */ public class UploadFile extends ActionSupport { private List<File> Filedata; // 默认的客户端文件对象,命名不符合java规范fileData private List<String> FiledataFileName; // 客户端文件名 private List<String> imageContentType; // 客户端文件名类型 public List<File> getFiledata() { return Filedata; } public void setFiledata(List<File> filedata) { Filedata = filedata; } public List<String> getFiledataFileName() { return FiledataFileName; } public void setFiledataFileName(List<String> filedataFileName) { FiledataFileName = filedataFileName; } public List<String> getImageContentType() { return imageContentType; } public void setImageContentType(List<String> imageContentType) { this.imageContentType = imageContentType; } @Override public String execute() throws Exception { if (Filedata == null || Filedata.size() == 0) { return null; } for (int i = 0; i < Filedata.size(); ++i) { HttpServletRequest request = ServletActionContext.getRequest(); // 获得ServletRequest对象 String userName = request.getParameter("username"); // 文件真名 String fileName = FiledataFileName.get(i); int fileOrderNum=0;//用来计数重名文件 long length = Filedata.get(i).length(); // 文件的真实大小 long time = System.currentTimeMillis(); // 将上传的文件保存到服务器的硬盘上 InputStream is = new BufferedInputStream(new FileInputStream(Filedata.get(i))); System.out.println("path:"+ServletActionContext.getServletContext().getRealPath("/")); String tmpSaveFileName = ServletActionContext.getServletContext().getRealPath("/userFiles/" + userName + "/pdf" ) + File.separator + fileName; File tmpFile = new File(tmpSaveFileName); while(tmpFile.exists()) { fileOrderNum++; tmpSaveFileName = ServletActionContext.getServletContext().getRealPath("/userFiles/" + userName + "/pdf" ) + File.separator + fileName+"("+fileOrderNum+")"; tmpFile = new File(tmpSaveFileName); } FileUtils.forceMkdir(tmpFile.getParentFile()); // 创建上传文件所在的父目录 OutputStream os = new BufferedOutputStream( new FileOutputStream(tmpFile)); int len = 0; byte[] buffer = new byte[500]; while (-1 != (len = is.read(buffer))) { os.write(buffer, 0, len); } is.close(); os.flush(); os.close();
return "success"; } }
5. 最后配置struts2，前面已经说过，插件实现的是异步刷新，所以这里的返回只需要随便写一个真实存在的jsp即可，不会对返回有影响。
<action name="upload" class="com.UploadFile"> <result name="success">/jsp/index.jsp</result> </action>
因为原插件中没有返回按钮，所以自己修改了GooUploader.js中的一小部分代码，加入了返回功能，在源码中找到this.$multiple，加入红色代码，可以在页面上加入返回按钮，如果想要修改显示图片，可以修改<b>标签的class。
if(this.$multiple){ this.$btn_upload=$("<div class=‘upload_btn‘><div class=‘left‘></div><div><b class=‘upload‘>"+(property.btn_up_text||"Upload")+"</b></div><div class=‘right‘></div></div>"); this.$btn_cancel=$("<div class=‘upload_btn‘ style=‘display:none‘><div class=‘left‘></div><div><b class=‘cancel‘>"+(property.btn_cancel_text||"Cancel")+"</b></div><div class=‘right‘></div></div>"); this.$btn_clean=$("<div class=‘upload_btn‘ style=‘float:right‘><div class=‘left‘></div><div><b class=‘clean‘>"+(property.btn_clean_text||"Clean")+"</b></div><div class=‘right‘></div></div>"); this.$btn_back=$("<div class=‘upload_btn‘ style=‘float:right‘><div class=‘left‘></div><div><b class=‘clean‘>"+"返回"+"</b></div><div class=‘right‘></div></div>"); this.$div_btn.append(this.$btn_upload).append(this.$btn_cancel).append(this.$btn_clean).append(this.$btn_back); }
在源码中找到以下代码，加入红色代码，为上面添加的按钮绑定调用函数即可。
if(this.$multiple){ this.$btn_upload.bind("click",{content:this.$content,fileList:this.$fileList,cancel:this.$btn_cancel},function(e){ for(var key in e.data.fileList){ var li=e.data.content.children("#"+key); if(li.children(".op_up").css("display")=="block"){ inthis.$goon=li.attr("id"); li.children(".op_up").click(); this.style.display="none"; e.data.cancel.css({display:"block"}); break; } } }); this.$btn_cancel.bind("click",{content:this.$content,fileList:this.$fileList},function(e){ for(var key in e.data.fileList){ var li=e.data.content.children("#"+key); if(li.children(".op_up").css("display")=="block"){ li.children(".op_up").css("display","none"); li.children(".op_del").css("display","none"); li.children(".op_no").click(); } else if(li.children(".op_no").css("display")=="block"){ li.children(".op_no").click(); } } }); this.$btn_clean.bind("click",{swfUpload:this.$swfUpload,content:this.$content,fileList:this.$fileList},function(e){ if(e.data.swfUpload.getStats().in_progress==0){ for(var key in e.data.fileList){ e.data.content.children("#"+key).remove(); e.data.fileList[key]=null; } } }); this.$btn_back.bind("click",function(e){
....... }); }