plupload上传插件在SpringMVC中的整合

前言：近期在给学院的站点做一个加入附件的功能，首先到了某某邮箱看了一下。简单有用。可是是flash做的，无法拷贝。就仅仅好上网找插件了。经过筛选。最终找到plupload这款插件（其实有的编辑器自带加入附件功能）。官网仅仅有PHP版本号。后来各种百度谷歌。找到的资料都用点小问题，拼搏一天最终实现了功能，以下就把遇到的问题和重点部分写出来。希望遇到相同问题的同学能够參考。

首先你须要下载plupload插件，下载地址：http://www.plupload.com/download/

JSP页面配置例如以下：

<!-- 配置界面上的css -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css">
<script type="text/javascript" src="<%=basePath%>js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>plupload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="<%=basePath%>plupload/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>

<!-- 国际化中文支持 -->
<script type="text/javascript" src="<%=basePath%>plupload/js/i18n/zh_CN.js"></script>

<script type="text/javascript">
// Initialize the widget when the DOM is ready
$(function() {
    // Setup html5 version
    function plupload(){
        $("#uploader").pluploadQueue({
            // General settings
            runtimes : 'flash,html5,gears,browserplus,silverlight,html4',
            url : "<%=basePath%>upload",
            //unique_names: true,
            chunk_size : '1mb',
            //rename : true,
            dragdrop: true,
            filters : {
                // Maximum file size
                max_file_size : '10mb',
                // Specify what files to browse for
                mime_types: [
                    {title : "Image files", extensions : "jpg,gif,png"},
                    {title : "Zip files", extensions : "zip"}
                ]
            },
            // Resize images on clientside if we can
            resize: {
                width : 200,
                height : 200,
                quality : 90,
                crop: true
                // crop to exact dimensions
            },             // Flash settings
            flash_swf_url : '<%=basePath%>plupload/js/Moxie.swf',
            // Silverlight settings
            silverlight_xap_url : '<%=basePath%>plupload/js/Moxie.xap' ,
            // 參数
            multipart_params: {'user': 'Rocky', 'time': '2012-06-12'}

        });
    }

    plupload();

    $('#Reload').click(function(){
        plupload();
    });
});

</script>

<div style="750px; margin:0px auto;">
        <div id="uploader">
            <p>您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .</p>
        </div>
        <input value="继续上传" id="Reload" type="button">
</div>

JS部分配置说明能够參考：http://www.douban.com/note/188007146/ 和 http://www.aixueit.com/thread-304-1-1.html，具体配置请自行百度或者查阅官网http://www.plupload.com。界面例如以下：

重点的就是后台了。在写后台前不得不说明一下plupload的大概工作原理：假设上传列表中存在文件大小大于chunk_size可是小于max_file_size的文件。那么plupload会将其分解成最大大小为chunk_size的几个小块（这能够绕过server设置的限制最大上传文件大小。另外进度条也会显示的合理），然后再将文件里的各个文件（包含分解后的小块）依次上传。这里的上传并非一次性所有传给server，而是当一个文件上传完毕后。再上传第二个文件。这样也非常好的做了进度条的显示。当然了，在后台代码中，假设遇到分块的文件，必须对其进行合并。

先附上之前找的部分资料吧，http://www.rockydo.com/articleDetail.php?id=83  感觉挺好的。只是我使用commons-fileupload-1.2.2.jar方式上传的时候获取不到值（能实现的同学欢迎告诉我）。所以后来就仅仅好换种方式了。于是就看到了这篇文章http://stackoverflow.com/questions/16813907/apache-commons-file-upload-with-spring-mvc-and-plupload，使用MultiparFile方式上传。代码剪短，可是给了我不小的启示。

好了，開始写我的思路吧。

为了更清楚的表达结构，我决定将重点处理代码写入一个PluploadUtil工具类，在配上一个Plupload Bean类，这样在调用时就方便多了。

具体代码例如以下：

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 java.util.Iterator;
import java.util.List;

import org.springframework.util.MultiValueMap;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

/**
 * Plupload是一个上传插件。
 * 上传原理为单个文件依次发送至server.
 * 上传打文件时能够将其碎片化上传。可是普通情况下，不会这样做，
 * 所以这里很多其它的是处理普通文件的批量上传。
 * 这里主要处理文件上传
 */
public class PluploadUtil {
    private static final int BUF_SIZE = 2 * 1024;
    /**上传失败响应的成功状态码*/
    public static final String RESP_SUCCESS = "{"jsonrpc" : "2.0", "result" : "success", "id" : "id"}";
    /**上传失败响应的失败状态码*/
    public static final String RESP_ERROR = "{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}";

    /**
     * 用于Plupload插件的文件上传,自己主动生成唯一的文件保存名
     * @param plupload - 存放上传所需參数的bean
     * @param dir - 保存目标文件文件夹
     * @throws IllegalStateException
     * @throws IOException
     */
    public static void upload(Plupload plupload, File dir) throws IllegalStateException, IOException {
        //生成唯一的文件名称
        String filename = "" + System.currentTimeMillis() + plupload.getName();
        upload(plupload, dir, filename);
    }

    /**
     * 用于Plupload插件的文件上传
     * @param plupload - 存放上传所需參数的bean
     * @param dir - 保存目标文件文件夹
     * @param filename - 保存的文件名称
     * @throws IllegalStateException
     * @throws IOException
     */
    public static void upload(Plupload plupload, File dir, String filename) throws IllegalStateException, IOException {
        int chunks = plupload.getChunks();  //获取总的碎片数
        int chunk = plupload.getChunk();    //获取当前碎片(从0開始计数)

        System.out.println(plupload.getMultipartFile() + "----------");

        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) plupload.getRequest();
        MultiValueMap<String, MultipartFile> map = multipartRequest.getMultiFileMap();

        if(map != null) {
            if (!dir.exists()) dir.mkdirs();    //假设目标文件夹不存在则创建新的文件夹

            //其实迭代器中仅仅存在一个值,所以仅仅须要返回一个值就可以
            Iterator<String> iter = map.keySet().iterator();
            while(iter.hasNext()) {
                String str = (String) iter.next();
                List<MultipartFile> fileList =  map.get(str);
                for(MultipartFile multipartFile : fileList) {
                    //由于仅仅存在一个值,所以最后返回的既是第一个也是最后一个值
                    plupload.setMultipartFile(multipartFile);

                    //创建新目标文件
                    File targetFile = new File(dir.getPath()+ "/" + filename);

                    //当chunks>1则说明当前传的文件为一块碎片，须要合并
                    if (chunks > 1) {
                        //须要创建暂时文件名称，最后再更改名称
                        File tempFile = new File(dir.getPath()+ "/" + multipartFile.getName());
                        //假设chunk==0,则代表第一块碎片,不须要合并
                        saveUploadFile(multipartFile.getInputStream(), tempFile, chunk == 0 ? false : true);

                        //上传并合并完毕，则将暂时名称更改为指定名称
                        if (chunks - chunk == 1) {
                            tempFile.renameTo(targetFile);
                        }

                    } else {
                        //否则直接将文件内容拷贝至新文件
                        multipartFile.transferTo(targetFile);
                    }
                }
            }
        }

    }

    /**
     * 保存上传文件，兼合并功能
     */
    private static void saveUploadFile(InputStream input, File targetFile, boolean append) throws IOException {
        OutputStream out = null;
        try {
            if (targetFile.exists() && append) {
                out = new BufferedOutputStream(new FileOutputStream(targetFile, true), BUF_SIZE);
            } else {
                out = new BufferedOutputStream(new FileOutputStream(targetFile), BUF_SIZE);
            }

            byte[] buffer = new byte[BUF_SIZE];
            int len = 0;
            //写入文件
            while ((len = input.read(buffer)) > 0) {
                out.write(buffer, 0, len);
            }
        } catch (IOException e) {
            throw e;
        } finally {
            //关闭输入输出流
            if (null != input) {
                try {
                    input.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            if (null != out) {
                try {
                    out.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }

    /**
     * 推断是否所有上传完毕
     * 碎片需合并后才返回真
     */
    public static boolean isUploadFinish(Plupload plupload) {
        return (plupload.getChunks() - plupload.getChunk() == 1);
    }


}

import javax.servlet.http.HttpServletRequest;

import org.springframework.web.multipart.MultipartFile;

/**
 * Plupload是一个上传插件。
 * 这是一个bean类,主要存储Plupload插件上传时须要的參数。
 * 属性名不可任意修改.
 * 这里主要使用MultipartFile文件上传方法
 */
public class Plupload {

    /**文件暂时名(打文件被分解时)或原名*/
    private String name;
    /**总的块数*/
    private int chunks = -1;
    /**当前块数（从0開始计数）*/
    private int chunk = -1;
    /**HttpServletRequest对象，不能直接传入进来，须要手动传入*/
    private HttpServletRequest request;
    /**保存文件上传信息，不能直接传入进来。须要手动传入*/
    private MultipartFile multipartFile;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getChunks() {
        return chunks;
    }

    public void setChunks(int chunks) {
        this.chunks = chunks;
    }

    public int getChunk() {
        return chunk;
    }

    public void setChunk(int chunk) {
        this.chunk = chunk;
    }

    public HttpServletRequest getRequest() {
        return request;
    }

    public void setRequest(HttpServletRequest request) {
        this.request = request;
    }

    public MultipartFile getMultipartFile() {
        return multipartFile;
    }

    public void setMultipartFile(MultipartFile multipartFile) {
        this.multipartFile = multipartFile;
    }

}

最后就是測试类了，这部分不是重点。比較粗糙

import java.io.File;
import java.io.IOException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class uploadAction {
    public static final String FileDir = "uploadfile/";

    /**上传界面*/
    @RequestMapping("/uploadui")
    public String uploadUI() {

        return "login.upload";
    }

    /**上传处理方法*/
    @RequestMapping(value="/upload", method = RequestMethod.POST)
    public String upload(Plupload plupload,HttpServletRequest request, HttpServletResponse response) {

        //System.out.println(plupload.getChunk() + "===" + plupload.getName() + "---" + plupload.getChunks());

        plupload.setRequest(request);
        //文件存储路径
        File dir = new File(plupload.getRequest().getSession().getServletContext().getRealPath("/") + FileDir);

        System.out.println(dir.getPath());

        try {
            //上传文件
            PluploadUtil.upload(plupload, dir);
            //推断文件是否上传成功（被分成块的文件是否所有上传完毕）
            if (PluploadUtil.isUploadFinish(plupload)) {
                System.out.println(plupload.getName() + "----");
            }

        } catch (IllegalStateException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        return "login.upload";
    }
}

好了，到此重点部分的工作算是完毕了，须要提醒一下的就是，在前台JS部分有一个rename參数，假设设置成true，后台就获取不到文件的真实名称了。后台获取真实名称也不在是MultipartFile的getOriginalFilename()方法了，由于被分块的文件名称称会改变，而须要使用Plupload.getName()获取。

附上上传成功界面图（这里把设置的文件是没有限制）：

至于后面的怎样将状态码以JOSN形式返回与前台进行交互和文件大小一次性上传大小的限制。就在往后用到了在详述吧。

以上观点均为个人意见，欢迎指正与批评。