jquery+alanx+fileupload 多文件上传组件

一：

引入必须的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 >

 

3. 参数说明：

 

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 会显示，点击可以看到官方的帮助文档

 

 

 

4 、效果图预览

 

 

 

 

 

 

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

下面是主要代码：（详细代码见class 文件）

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 >