Plupload插件的GitHub地址可：点击此处；
Plupload上传插件官网地址可：点击此处；
Plupload上传插件中文帮助文档可：点击此处。

Plupload插件介绍

    首先解读一下官网的介绍哈：
    Plupload插件是一个跨浏览器的、多运行时文件上传API接口。通俗地讲，就是一系列帮助您在几分钟内构建可靠且具有视觉吸引力的文件上传器。
    在历史渊源上，Plupload源自于HTML5前的黑暗时代，因此，可支持所有替代的后备方案，像：Flash、Silverlight和Java。它旨在提供一个 API，它可以在任何地方、任何情况下以一种或另一种方式工作。尽管有非常可靠的后备，Plupload 在构建时考虑到了 HTML5 的未来。

Plupload插件下载

Plupload插件可以从官网下载，点击此处，然后在打开页面中，点击download即可下载。
下载之后的文件夹结构如下，

Plupload插件使用

Plupload插件在使用时，是十分方便的，在无需特殊要求的情况下，只需要引入js文件夹下的plupload.full.min.js文件即可。

然后进行一顿参数配置，具体参数含义可以点击此处查看。

前端页面编写

示例demo如下，

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>plupload文件上传</title></head>
<body><ul id="filelist"></ul><br/><div id="container"><a id="browse" href="javascript:;">[Browse...]</a><a id="start-upload" href="javascript:;">[Start Upload]</a></div><br /><pre id="console"></pre>
</body>
<script src="../js/plupload.full.min.js"></script>
<script>//除文件之外要上传的参数let multipartParams={username:"小张",password:"258596",role:0,state:0,};//请求头let headers = {"token_name": "sdakldkslad"};//文件上传组件-参数配置let uploader = new plupload.Uploader({browse_button:"browse",//文件上传按钮url:"http://localhost:8099/sci_web/upload",//文件请求接口-自己写的java后端接口filters: {//文件类型过滤器mime_types : [{ title : "图片", extensions : "jpg,gif,png" },{ title : "压缩包", extensions : "zip" }],//单个文件大小定义max_file_size: (1024*1024) + "kb",//0 (unlimited)//防止文件重复选择prevent_duplicates:true,//default-falsemultipart:true,//default -true ,是否将文件作为 multipart/form-data (default) 或者binary stream上传// multipart_params:{//     name:"hidsaldl"// },//额外的参数drop_element:"browse",//拖拽方式选择文件multi_selection:true,//开启多文件上传unique_names:true,//为每个文件自动生成唯一名称-作为额外的参数post到服务器端，参数明为name,值为生成的文件名chunk_size:"1Mb",//文件分块大小},init:{//文件上传之前的回调函数BeforeUpload:function (up,files){console.log("上传文件之前")up.setOption("multipart_params",multipartParams);},//添加文件时的回调函数FilesAdded: function(up, files) {var html = '';plupload.each(files, function(file) {console.log(file)html += '<li id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></li>';});document.getElementById('filelist').innerHTML += html;},//文件上传时的进度条绑定UploadProgress: function(up, file) {document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";},//文件上传完毕之后,服务器端返回的参数信息/*** uploader为当前的plupload实例对象，file为触发此事件的文件对象，responseObject为服务器返回的信息对象，它有以下3个属性：*          response：服务器返回的文本*          responseHeaders：服务器返回的头信息*          status：服务器返回的http状态码，比如200*/FileUploaded:function (uploader,file,responseObject){console.log(responseObject);//打印返回值},//错误处理回调函数Error:function(up, err) {document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;},}})uploader.init();//文件上传组件-初始化/*** 文件上传按钮事件绑定-激活文件上传功能* 单个文件逐一上传-后端只需编写处理单个文件的接口即可*/document.getElementById('start-upload').onclick = function() {console.log('开始上传文件')//调用文件上传的接口-执行文件上传动作uploader.start();};</script>
</html>

后端接口编写

为了方便演示，直接将其保存到本地的桌面上，所在文件夹路径为：C:\Users\13241\Desktop\plupload-2.3.9。示例代码如下，
PS-1：前后端通信注意跨域配置，详见：《SpringBoot-跨域访问3种配置方式》；
PS-2：文件上传，注意在application.yml或者application.properties文件中修改文件上传的默认参数值，限定文件上传大小，可参考官网文档：SpringBoot#multipart配置参数。

package com.example.controller;import com.example.pojo.Tb_User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;/*** @ClassName AppController* @Description: com.example.controller* @Auther: xiwd* @Date: 2022/6/9 - 06 - 09 - 0:52* @version: 1.0*/
@Controller
@CrossOrigin(originPatterns = "*",allowedHeaders = "*",methods = {},allowCredentials = "true")
public class AppController {@RequestMapping("/upload")@ResponseBodypublic String upload(@RequestParam MultipartFile file,@RequestParam(value = "name")String name,//pojoTb_User user) throws IOException {System.out.println("*************************");System.out.println(name);System.out.println(user);System.out.println("*************************");System.out.println(file);System.out.println("文件上传");//保存文件到桌面file.transferTo(new File("C:\\Users\\13241\\Desktop\\plupload-2.3.9\\"+name));return "文件上传";}
}

文件上传结果

上传结果，文件已经保存到了目标文件夹下，

再看一下客户端控制台打印的接收参数信息，如下所示，也正确无误。

Plupload插件相关推荐

WordPress Plupload插件未明跨站脚本漏洞
漏洞名称: WordPress Plupload插件未明跨站脚本漏洞 CNNVD编号: CNNVD-201301-531 发布时间: 2013-01-30 更新时间: 2013-01-30 危害等级: ...
【Plupload插件】基础使用教程
前言 Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件,简单易用且功能强大. 特点拥有多种上传方式:HTML5.flash.silverlight以及传统的.Pluploa ...
Vue：利用Plupload插件封装文件上传组件
接上回<Plupload插件>,已经尝试将Plupload插件引入到HTML页面中,并进行参数配置,然后联合后端接口进行调试,完成了文件上传的工作.但是在Vue项目的开发中,我们更想将它封 ...
Django项目中使用plupload插件实现上传图片功能
首先下载plupload插件放在static静态文件下面,官方地址:https://www.plupload.com/ 项目根目录下创建media文件夹用来存放上传的图片,配置settings文件,添 ...
plupload插件使用
plupload这个插件可实现拖拽文件到指定区域就可上传的功能使用步骤如下: 第一步:导入js,css. 第二步:写一个html页面,定义一个id,然后ajax提交第三步:写后台代码,复制文件,保 ...
plupload插件的错误SCRIPT601
在网上copy 别人的demo来用结果发生这个问题.浪费半天时间才找到问题. 在IE8下下提示这个异常. SCRIPT601: 未知的运行时错误 plupload.full.min.js, 行15 字 ...
plupload插件的简单使用
1.官网下载所需plupload文件:http://www.plupload.com/ 2.实例化一个plupload对象 3.对plupload对象使用init()方法初始化 4.绑定各种事件,实现 ...
一个很好用的JavaScript的文件上传插件plupload
2019独角兽企业重金招聘Python工程师标准>>> plupload插件,官网:http://www.plupload.com/ 中文解释:http://www.cnblogs. ...
plupload文件上传插件使用
官方文档:http://www.phpin.net/tools/plupload/ //实例化组件 //附件1上传路径 var dirFile1 = '/upload/htfj/rchtfj/${da ...

Plupload插件