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

最新推荐文章于 2018-12-18 20:45:48 发布

原创最新推荐文章于 2018-12-18 20:45:48 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#文件上传组件 #jquery #jquery插件 #behavior #upload #string

一：

引入必须的js 文件和css 文件：

< script type = "text/javascript" src = "jquery-1.4.2.min.js" ></ script >

< script type = "text/javascript" src = "core/swfobject.js" ></ script >

< script type = "text/javascript" src = "vinAlanx-1.0.js" ></ script >

二：

在body 中添加组件显示目标

三：

在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 >