SSM框架+Plupload实现分块上传大文件示例

关于Plupload的介绍，相信它的官网http://www.plupload.com/已经给得很详细了。Plupload的上传原理简单点说，就是将用户选中的文件（可多个）分隔成一个个小块，依次向服务器上传，这是它能驾驭上传大文件的原因之一，而且在这个过程可以暂停上传，暂停后再继续上传（异于断点续传）。最重要的是，从头到尾没有一点点UI阻塞，保证了用户体验。下面会开始讲Plupload的实现流程，分析原理，并在最后给出效果图。

在此之前先说说我的项目，做的j2ee项目运用到spring+SpringMVC+MyBatis的框架集合，是关于一个社交平台的网站，类似于facebook，twitter，微博等，起了一个名字叫YouAndMe。我大胆地构想了这个项目应该有一个用户资料共享的平台，或是一部好看的电影，或是一套电视剧，或是居家必备的食谱，也有可能是好看的风景图，各式各样。用户可以搜索想要的资料并下载。因此首先要解决的就是各式各样（大）文件的上传。

一：下载Plupload插件并引入相应文件

值得一提的是这个插件只是前端的，后台怎么获取怎么将一个个小块合并等代码是要自己写的。

下载地址：http://www.plupload.com/download，我下的是Plupload 2.1.9 GPLv2版本的，里面有要用到的css以及js。

在项目中需要引入：jQuery.plupload.queue.css，jquery-2.0.0.min.js，plupload.full.min.js，jquery.plupload.queue.js，zh_CN.js这些文件。

二：前端准备

1.首先在html中写入如下代码：

<div id="uploader">
 <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>
<button id="toStop">暂停一下</button>
<button id="toStart">再次开始</button>

注意div的id必须是uploader，这在插件源码里是有规定的；id为toStop与toStart的按钮是我自己加的，目的是为了实现暂停上传与暂停过后的继续上传。

2.页面加载后通过js初始化组件

<script type="text/javascript">
 $(function() {
  // Initialize the widget when the DOM is ready
  var uploader = $("#uploader").pluploadQueue({
   // General settings
   runtimes: 'html5,flash,silverlight,html4',
   url: "../pluploadUpload",

   // Maximum file size
   max_file_size: '10000mb',

   chunk_size: '1mb',

   // Resize images on clientside if we can
   resize: {
    width: 200,
    height: 200,
    quality: 90,
    crop: true // crop to exact dimensions
   },

   // Specify what files to browse for
   filters: [
    {title: "Image files", extensions: "jpg,gif,png"},
    {title: "Vedio files", extensions: "mp4,mkv"},
    {title: "Zip files", extensions: "zip,avi"}
   ],

   // Rename files by clicking on their titles
   rename: true,

   // Sort files
   sortable: true,

   // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
   dragdrop: true,

   // Views to activate
   views: {
    list: true,
    thumbs: true, // Show thumbs
    active: 'thumbs'
   },

   // Flash settings
   flash_swf_url: 'js/Moxie.swf',

   // Silverlight settings
   silverlight_xap_url: 'js/Moxie.xap'
  });

  $("#toStop").on('click', function () {
   uploader.stop();
  });

  $("#toStart").on('click', function () {
   uploader.start();
  });
 });
</script>

关于这部分的功能可以查看pluploadQueue的文档：http://www.plupload.com/docs/pluploadQueue。也很容易看懂，这里简单地说说部分参数的意义。

url就是服务器处理该上传的地址。filters是过滤器的意思，规定哪些格式的文件可以上传。dragdrop：true设置了可以拖拽文件至选定框。

注意：在暂停与继续上传时要用到uploader.stop()与uploader.start()，这个uploader实例由$("#uploader").pluploadQueue({...})时产生。在官网给出的例子中有两种情况：一是注册时一次性全部给定参数，但是这样是不会返回一个uploader实例的；二是注册时不给参数，会返回uploader实例，再对这个uploader实例绑定事件时一步步给出参数。但很明显我这里给定了参数又同时返回了一个uploader实例，只要修改一个源码：打开jquery.plupload.queue.js源码找到定义pluploadQueue这块，将if (settings) 内的返回return this，改成return uploaders[$(this[0]).attr('id')]。这样，点击暂停按钮时，当前上传会暂停，点击开始按钮时，又继续。

三：Controller映射

  @Autowired
  private PluploadService pluploadService;

  /**Plupload文件上传处理方法*/
  @RequestMapping(value="/pluploadUpload")
  public void upload(Plupload plupload,HttpServletRequest request,HttpServletResponse response) {

    String FileDir = "pluploadDir";//文件保存的文件夹
    plupload.setRequest(request);//手动传入Plupload对象HttpServletRequest属性

    int userId = ((User)request.getSession().getAttribute("user")).getUserId();

    //文件存储绝对路径,会是一个文件夹，项目相应Servlet容器下的"pluploadDir"文件夹，还会以用户唯一id作划分
    File dir = new File(request.getSession().getServletContext().getRealPath("/") + FileDir+"/"+userId);
    if(!dir.exists()){
      dir.mkdirs();//可创建多级目录，而mkdir()只能创建一级目录
    }
    //开始上传文件
    pluploadService.upload(plupload, dir);
  }

在这里，我规定不同用户上传的资料会根据唯一id分开不同的文件夹，基于注释代码很容易看懂，你或许会困惑于Plupload与PluploadService，下面就会给出。

四：Plupload类

package web.plupload;

import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;

/**
 * Plupload实体类固定格式，属性名不可修改
 * 因为MultipartFile要用到Spring web的依赖，而该依赖在web模块中才引入，所以不把该实体类放在entity模块
 */
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;
  }
}

再次提醒类名与属性名不可随意改变。通过规定好的正确的属性名，客户端通过Http发送块文件至服务端Controller，得到的plupload对象才能传入正确的文件信息。

关于属性的说明代码注释已经说得很清楚了，可以自行研究学习。

五：PluploadService类

package web.plupload;

import entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.util.MultiValueMap;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import java.io.*;
import java.sql.Timestamp;
import java.util.Iterator;
import java.util.List;

import service.youandmeService;

/**
 * Plupload Service模块，同Plupload实体类一样，因为要用到Spring web相关依赖，