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 ,

显示AlanXlogo 及链接,默认为显示,当鼠标在组件右边悬停时,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 >

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值