简单介绍使用GooUploader.js实现批量上传文件的方法（使用struts2）

Posted 2020-10-17

　　最近的网站项目中需要实现上传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){
　　　　　　.......
      });
    }