jquery+alanx+fileupload下传组件

jquery+alanx+fileupload上传组件
     最近闲着没事就找了些上传的东西，折腾下。折腾完SWFUpload就折腾下Alanx那个上传的东西，原有的是封装在一个jar中，使用标签，我觉得有点不爽，就给折腾了个jquery插件：

具体使用步骤：

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

参数说明：

width : 500,插件显示区域宽度heigth : 100,插件显示区域高度uploadURL:'/ AlanXUploadServlet ',处理上传请求的服务器端脚本URLexpressInstallURL:" 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,上传某一个文件出错，是否继续上传其他文件默认为trueshowLogoTxt:false,显示AlanX的logo及链接，默认为显示，当鼠标在组件右边悬停时，logo会显示，点击可以看到官方的帮助文档

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

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>

效果图预览

查看更多 下一篇