您的位置：首页 > Web前端 > JQuery

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

2011-05-27 12:52 120 查看
一：

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

1235e
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
>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  文件上传组件 jquery jquery插件 behavior upload string
相关文章推荐
新的分享
章节导航