plupload使用例子

plupload使用例子

1. 例子

<li><a id="uploadFile">上传</a></li>

//文书上传和显示
$(function () {
    var uploader = new plupload.Uploader({
        runtimes: 'html5,flash,silverlight,html4',// 指定上传方式
        browse_button: 'uploadFile',
        unique_names: true,
        file_data_name: 'files',//后端取文件的名字
        url: getUrlPath() + "/uploadFile.do",
        filters: { //过滤器
            max_file_size: '63kb', //文件最大可上传的文件大小
            mime_types: [ //用来限定上传文件的类型
                {title: "Default files", extensions: "doc,docx,pdf"}
            ],
            prevent_duplicates: false // 不可选取重复的文件
        },
        multipart_params: {},
        multi_selection: true,  //是否可以在文件浏览对话框中选择多个文件
        multiple_queues: false, //是否启用以拖放文件到窗口
        init: {
            Init: function (up) {
            },
            BeforeUpload: function (up, files) { //当队列中的某一个文件正要开始上传前触发
            },
            FilesAdded: function (up, files) {	// 添加文件回调
					 up.start();
                }
            },
            UploadProgress: function (up, file) {	// 显示文件上传的状态,会在文件上传过程中不断触发
            },
            FileUploaded: function (up, file, info) { //当队列中的某一个文件上传完成后触发 针对于每一个文件；这里主要返回文件上传成功与否的状态，
                var res = JSON.parse(info.response);
               //在这儿可以拼接html
                $('#files').append(html);
                //初始化复选框
                checkboxInit($('#' + ("checkFile" + res.data)));
            },
            UploadComplete: function (up, files) {		//队列中的所有文件上传完后，触发
                if (files.length === 0) {
                    layer.alert("请选择文件", {icon: 7});
                    return;
                }
                layer.alert("文件上传成功", {icon: 1}, function (index) {
                    layer.close(index);
                });
            },
            Error: function (up, err, file) { // 上传出错的时候触发
                if (err.message === 'File extension error.') {
                    layer.msg('上传的文件格式不支持', {
                        time: 2000,
                        icon: 2,
                        shade: 0.3
                    });
                } else if (err.message === 'File size error.') {
                    layer.msg('上传的文件过大', {
                        time: 2000,
                        icon: 2,
                        shade: 0.3
                    });
                } else if (err.message === 'Duplicate file error.') {
                    layer.msg('上传的文件重复', {
                        time: 2000,
                        icon: 2,
                        shade: 0.3
                    });
                } else {
                    layer.msg('上传的文件错误', {
                        time: 2000,
                        icon: 2,
                        shade: 0.3
                    });
                }
            }
        }
    });
    uploader.init();//初始化plupload,这句是必须的
})

    /**
     * @param files 前端传过来的文件
     * @return tdh.entity.vo.CommResultVO 通用返回类
     * @description 文件上传
     * @author zhaohuaqing
     * @date 2021/7/22 14:19
     */
    @PostMapping(value = "/uploadFile.do")
    @ResponseBody
    public CommResultVo uploadFile(MultipartFile files) {
        log.debug("前端传回来的文件:{}", files);
        int xh;
        try {
            xh = ckjzService.uploadTempFile(files);
        } catch (IOException e) {
            log.error("IO异常" + e.getMessage(), e);
            return CommResultVo.fail("文件上传异常");
        }
        log.debug("文件序号:{}", xh);
        return xh == 0 ? CommResultVo.fail("上传失败") : CommResultVo.success("上传成功", xh);
    }

2.说明

可以自己去找plupload的文档