SSM框架+Plupload实现分块上传（Spring+SpringMVC+MyBatis+Plupload）_plupload分片上传spring后端接收-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_33290787/article/details/52277034

本文介绍了如何在基于SSM（Spring+SpringMVC+MyBatis）的项目中，结合Plupload插件实现大文件分块上传。Plupload将文件切割成小块并异步上传，支持暂停和继续上传。文章详细讲解了前端配置、控制器映射、自定义Plupload类和服务类的方法，以实现文件的断点续传和合并。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于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