Plupload插件

是席木木啊

于 2022-06-20 00:05:03 发布

阅读量1.3k

点赞数 1

分类专栏： Java Vue 文章标签： plupload文件上传插件 SpringBoot 文件上传

本文链接：https://blog.csdn.net/weixin_43524214/article/details/125362837

版权

Java 同时被 2 个专栏收录

67 篇文章 3 订阅

订阅专栏

Vue

52 篇文章 10 订阅

订阅专栏

    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-false
            multipart: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")
    @ResponseBody
    public String upload(@RequestParam MultipartFile file,
                         @RequestParam(value = "name")String name,
                         //pojo
                         Tb_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 "文件上传";
    }
}

文件上传结果

上传结果，文件已经保存到了目标文件夹下，
在这里插入图片描述
再看一下客户端控制台打印的接收参数信息，如下所示，也正确无误。

是席木木啊

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Plupload插件

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

扫一扫