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