plupload 上传插件（java版）

最近发现一个非常牛的上传组件，前端根据浏览器不同选择使用Html5、 Gears, Silverlight, Flash, BrowserPlus来对文件进行客户端优化，比如大图片的压缩，大文件分块上传，简直是太牛了，还有上传进度条、多文件上传等。官方网 站：http://plupload.com/，下载的domo是php版本的，于是我弄了个java版本的，分享给大家，

前端js等文件去下载个domo就有了，后端使用到了commons-fileupload-1.2.2.jar这个包。

前端html：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 


  


  


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 


<title>plupload</title> 


<!-- 配置界面上的css --> 


<link rel="stylesheet" type="text/css" href="plupload/jquery.plupload.queue/css/jquery.plupload.queue.css"> 


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


<script type="text/javascript" src="plupload/plupload.full.js"></script> 


<script type="text/javascript" src="plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script> 


  


<!-- 国际化中文支持 --> 


<script type="text/javascript" src="plupload/i18n/cn.js"></script> 


  


<script type="text/javascript"> 


/* Convert divs to queue widgets when the DOM is ready */ 


$(function(){ 


    function plupload(){ 


        $("#uploader").pluploadQueue({ 


            // General settings 


            runtimes : 'html5,gears,browserplus,silverlight,flash,html4', 


            url : 'servlet/fileUpload', 


            max_file_size : '10mb', 


            unique_names: true, 


            chunk_size: '2mb', 


            // Specify what files to browse for 


            filters : [ 


                {title: "Image files", extensions: "jpg,gif,png"}, 


                {title: "Zip files", extensions: "zip"} 


            ], 


            resize: {width: 640, height: 480, quality: 90}, 


            // Flash settings 


            flash_swf_url: 'plupload/plupload.flash.swf', 


            // Silverlight settings 


            silverlight_xap_url: 'plupload/plupload.silverlight.xap', 


            // 参数 


            multipart_params: {'user': 'Rocky', 'time': '2012-06-12'} 


        }); 


    } 


    plupload(); 


    $('#Reload').click(function(){ 


        plupload(); 


    }); 


}); 


</script> 


  


  


<div style="width:750px; margin:0 auto"> 


    <form id="formId" action="Submit.action" method="post"> 


        <div id="uploader"> 


            <p>您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .</p> 


        </div> 


        <input value="重新上传" id="Reload" type="button"> 


    </form> 


</div> 




<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 


  


  


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 


<title>plupload</title> 


<!-- 配置界面上的css --> 


<link rel="stylesheet" type="text/css" href="plupload/jquery.plupload.queue/css/jquery.plupload.queue.css"> 


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


<script type="text/javascript" src="plupload/plupload.full.js"></script> 


<script type="text/javascript" src="plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script> 


  


<!-- 国际化中文支持 --> 


<script type="text/javascript" src="plupload/i18n/cn.js"></script> 


  


<script type="text/javascript"> 


/* Convert divs to queue widgets when the DOM is ready */ 


$(function(){ 


    function plupload(){ 


        $("#uploader").pluploadQueue({ 


            // General settings 


            runtimes : 'html5,gears,browserplus,silverlight,flash,html4', 


            url : 'servlet/fileUpload', 


            max_file_size : '10mb', 


            unique_names: true, 


            chunk_size: '2mb', 


            // Specify what files to browse for 


            filters : [ 


                {title: "Image files", extensions: "jpg,gif,png"}, 


                {title: "Zip files", extensions: "zip"} 


            ], 


            resize: {width: 640, height: 480, quality: 90}, 


            // Flash settings 


            flash_swf_url: 'plupload/plupload.flash.swf', 


            // Silverlight settings 


            silverlight_xap_url: 'plupload/plupload.silverlight.xap', 


            // 参数 


            multipart_params: {'user': 'Rocky', 'time': '2012-06-12'} 


        }); 


    } 


    plupload(); 


    $('#Reload').click(function(){ 


        plupload(); 


    }); 


}); 


</script> 


  


  


<div style="width:750px; margin:0 auto"> 


    <form id="formId" action="Submit.action" method="post"> 


        <div id="uploader"> 


            <p>您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .</p> 


        </div> 


        <input value="重新上传" id="Reload" type="button"> 


    </form> 


</div> 

后端 



package com.rock; 


  


import java.io.BufferedOutputStream; 


import java.io.File; 


import java.io.FileOutputStream; 


import java.io.IOException; 


import java.io.InputStream; 


import java.io.OutputStream; 


  


import javax.servlet.ServletException; 


import javax.servlet.ServletOutputStream; 


import javax.servlet.http.HttpServlet; 


import javax.servlet.http.HttpServletRequest; 


import javax.servlet.http.HttpServletResponse; 


  


import org.apache.commons.fileupload.FileItemIterator; 


import org.apache.commons.fileupload.FileItemStream; 


import org.apache.commons.fileupload.servlet.ServletFileUpload; 


import org.apache.commons.fileupload.util.Streams; 


  


public class FileUploadAction extends HttpServlet { 


    private static final long serialVersionUID = 3447685998419256747L; 


    private static final String RESP_SUCCESS = "{\"jsonrpc\" : \"2.0\", \"result\" : \"success\", \"id\" : \"id\"}"; 


    private static final String RESP_ERROR = "{\"jsonrpc\" : \"2.0\", \"error\" : {\"code\": 101, \"message\": \"Failed to open input stream.\"}, \"id\" : \"id\"}"; 


    public static final String JSON = "application/json"; 


    public static final int BUF_SIZE = 2 * 1024; 


    public static final String FileDir = "uploadfile/"; 


      


    private int chunk; 


    private int chunks; 


    private String name; 


    private String user; 


    private String time; 


  


    /** 


     * Handles an HTTP POST request from Plupload. 


     *  


     * @param req The HTTP request 


     * @param resp The HTTP response 


     */ 


    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 


        String responseString = RESP_SUCCESS; 


        boolean isMultipart = ServletFileUpload.isMultipartContent(req); 


          


        if(isMultipart){ 


            ServletFileUpload upload = new ServletFileUpload(); 


            try { 


                FileItemIterator iter = upload.getItemIterator(req); 


                while (iter.hasNext()) { 


                    FileItemStream item = iter.next(); 


                    InputStream input = item.openStream(); 


  


                    // Handle a form field. 


                    if(item.isFormField()){ 


                        String fileName = item.getFieldName(); 


                        String value = Streams.asString(input); 


  


                        if("name".equals(fileName)){ 


                            this.name = value; 


                        }else if("chunks".equals(fileName)){ 


                            this.chunks = Integer.parseInt(value); 


                        }else if("chunk".equals(fileName)){ 


                            this.chunk = Integer.parseInt(value); 


                        }else if("user".equals(fileName)){ 


                            this.user = value; 


                        }else if("time".equals(fileName)){ 


                            this.time = value; 


                        } 


                    } 


                      


                    // Handle a multi-part MIME encoded file. 


                    else { 


                        String fileDir = req.getSession().getServletContext().getRealPath("/")+FileDir; 


                        File dstFile = new File(fileDir); 


                        if (!dstFile.exists()){ 


                            dstFile.mkdirs(); 


                        } 


                          


                        File dst = new File(dstFile.getPath()+ "/" + this.name); 


                          


                        saveUploadFile(input, dst); 


                    } 


                } 


            } 


            catch (Exception e) { 


                responseString = RESP_ERROR; 


                e.printStackTrace(); 


            } 


        } 


          


        // Not a multi-part MIME request. 


        else { 


            responseString = RESP_ERROR; 


        } 


          


        if(this.chunk == this.chunks - 1){ 


            System.out.println("用户："+this.user); 


            System.out.println("文件名称："+this.name); 


            System.out.println("上传时间："+this.time); 


        } 


  


        resp.setContentType(JSON); 


        byte[] responseBytes = responseString.getBytes(); 


        resp.setContentLength(responseBytes.length); 


        ServletOutputStream output = resp.getOutputStream(); 


        output.write(responseBytes); 


        output.flush(); 


    } 


  


    /** 


     * Saves the given file item (using the given input stream) to the web server's 


     * local temp directory. 


     *  


     * @param input The input stream to read the file from 


     * @param dst The dir of upload 


     */ 


    private void saveUploadFile(InputStream input, File dst) throws IOException { 


        OutputStream out = null; 


        try { 


            if (dst.exists()) { 


                out = new BufferedOutputStream(new FileOutputStream(dst, true), 


                        BUF_SIZE); 


            } else { 


                out = new BufferedOutputStream(new FileOutputStream(dst), 


                        BUF_SIZE); 


            } 


  


            byte[] buffer = new byte[BUF_SIZE]; 


            int len = 0; 


            while ((len = input.read(buffer)) > 0) { 


                out.write(buffer, 0, len); 


            } 


        } catch (Exception e) { 


            e.printStackTrace(); 


        } finally { 


            if (null != input) { 


                try { 


                    input.close(); 


                } catch (IOException e) { 


                    e.printStackTrace(); 


                } 


            } 


            if (null != out) { 


                try { 


                    out.close(); 


                } catch (IOException e) { 


                    e.printStackTrace(); 


                } 


            } 


        } 


    } 


}