jquery使用uploadify插件实现多文件的上传（java版）

源码地址：https://git.oschina.net/zhengweishan/UploadDemo_Java

1、jquery uploadify 下载：http://www.uploadify.com/

2、安装，由于下载下来的例子是php版本的，所以我只留下了主要的几个文件。如图：

3、配置项说明，请自行看文档。文档地址：http://www.uploadify.com/documentation/

4、使用

前台页面：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<%@ page language="java" contentType="text/html; charset=UTF-8"      pageEncoding="UTF-8"%> <! DOCTYPE  html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> < html > < head > < meta  http-equiv = "Content-Type"  content = "text/html; charset=UTF-8" > < title >Insert title here</ title > < link  href = "plugin/uploadify/uploadify.css"  rel = "stylesheet"  type = "text/css"  /> < script  src = "plugin/uploadify/jquery-1.11.3.js"  type = "text/javascript" ></ script > < script  src = "plugin/uploadify/jquery.uploadify.js"  type = "text/javascript" ></ script > < script  type = "text/javascript" >   $(document).ready(function() {        $("#uploadify").uploadify({            'swf'       : 'plugin/uploadify/uploadify.swf',            'uploader'  : 'UploadServlet',              'folder'         : '/upload',            'queueID'        : 'fileQueue',          'cancelImg'      : 'plugin/uploadify/uploadify-cancel.png',          'buttonText'     : '上传文件',          'auto'           : false, //设置true 自动上传 设置false还需要手动点击按钮           'multi'          : true,            'wmode'          : 'transparent',            'simUploadLimit' : 999,            'fileTypeExts'        : '*.*',            'fileTypeDesc'       : 'All Files'      });   });   </ script >   </ head > < body > < div >          <%--用来作为文件队列区域--%>          < div  id = "fileQueue"  style = "position:absolute; right:50px; bottom:100px;z-index:999" >          </ div >          < input  type = "file"  name = "uploadify"  id = "uploadify" />          < p >              < a  href = "javascript:$('#uploadify').uploadify('upload','*')" >上传</ a >|               < a  href = "javascript:$('#uploadify').uploadify('cancel','*')" >取消上传</ a >          </ p >                </ div >       </ body > </ html >

后台：

这里需要用到commons-fileupload组件，自行下载（提供的源码中有哦~）。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

import  java.io.BufferedInputStream; import  java.io.BufferedOutputStream; import  java.io.File; import  java.io.FileOutputStream; import  java.io.IOException; import  java.io.PrintWriter; import  java.util.Date; import  java.util.Iterator; import  java.util.List; import  javax.servlet.ServletException; import  javax.servlet.annotation.WebServlet; 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; import  org.apache.commons.fileupload.util.Streams; /**   * Servlet implementation class UploadServlet   */ @WebServlet ( "/UploadServlet" ) public  class  UploadServlet  extends  HttpServlet { private  static  final  long  serialVersionUID = 1L;               /**       * @see HttpServlet#HttpServlet()       */      public  UploadServlet() {          super ();          // TODO Auto-generated constructor stub      } /**   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)   */ protected  void  doGet(HttpServletRequest request, HttpServletResponse response)  throws  ServletException, IOException { // TODO Auto-generated method stub doPost(request,response); } /**   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)   */ protected  void  doPost(HttpServletRequest request, HttpServletResponse response)  throws  ServletException, IOException { // TODO Auto-generated method stub //文件存放的目录            File tempDirPath = new  File(request.getSession().getServletContext().getRealPath( "/" )+ "\\upload\\" );            if (!tempDirPath.exists()){                tempDirPath.mkdirs();            }                        //创建磁盘文件工厂            DiskFileItemFactory fac =  new  DiskFileItemFactory();                //创建servlet文件上传组件            ServletFileUpload upload =  new  ServletFileUpload(fac);                //文件列表            List<FileItem> fileList =  null ;                //解析request从而得到前台传过来的文件            try  {                    fileList = upload.parseRequest(request);                }  catch  (FileUploadException ex) {                    ex.printStackTrace();                    return ;                }             //保存后的文件名            String imageName =  null ;            //便利从前台得到的文件列表            Iterator<FileItem> it = fileList.iterator();               while (it.hasNext()){                    FileItem item =  it.next();               //如果不是普通表单域，当做文件域来处理                if (!item.isFormField()){                imageName =  new  Date().getTime()+Math.random()* 10000 +item.getName();                    BufferedInputStream in =  new  BufferedInputStream(item.getInputStream());                       BufferedOutputStream out =  new  BufferedOutputStream(                                  new  FileOutputStream( new  File(tempDirPath+ "\\" +imageName)));                    Streams.copy(in, out,  true );                                    }            }            //            PrintWriter out =  null ;            try  {                out = encodehead(request, response);            }  catch  (IOException e) {                e.printStackTrace();            }            //这个地方不能少，否则前台得不到上传的结果            out.write( "1" );          out.close();    } /**        * Ajax辅助方法 获取 PrintWriter        * @return        * @throws IOException         * @throws IOException         * request.setCharacterEncoding("utf-8");           response.setContentType("text/html; charset=utf-8");        */   private  PrintWriter encodehead(HttpServletRequest request,HttpServletResponse response)  throws  IOException{            request.setCharacterEncoding( "utf-8" );            response.setContentType( "text/html; charset=utf-8" );            return  response.getWriter();        }   }

5、最终效果图 有点类似百度上传文件的页面效果 没有百度做的好看哈~ 请勿喷