agent_center/app/assets/js/plupload_custom.js

/**
 * Plupload上传自定义函数库.
 * @auhor nj
 * @date 2021-10.29
 */

/**
 * 上传前本地图预览.
 * @param {*} file 
 * @param {*} callback 
 * @returns 
 */
function pluploadPreviewImage(file, callback) {
    //file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数
    if (!file || !/image\//.test(file.type)) {
        return; //确保文件是图片
    }
    let preloader = new window.FileReader();
    preloader.readAsDataURL(file.getNative());
    preloader.onload = function () {
        base64data = preloader.result;
        base64data = base64data.substring(base64data.indexOf(",") + 1);
        let b64url = "data:" + file.type + ";base64," + base64data;
        callback(b64url);
        preloader = null;

    }
}

/**
 * 上传可选择文件类型mime
 * @param {*} type 
 * @returns 
 */
function pluploadSelectMime(type)
{
    let arrTypes = {
        image: {title: '图像文件', extensions : 'jpg,jpeg,png,gif,webp'},
        zip: {title: '压缩文件', extensions : 'zip,7z,rar,tar,bz,bz2,gz'},
        android: {title: 'Apk文件', extensions : 'apk'},
        ios: {title: 'Apk文件', extensions : 'ipa'},
        mp4: {title: 'mp4文件', extensions : 'mp4'},
        media: {title: '视频文件', extensions : 'flv,swf,mkv,rm,rmvb,avi,av,dv,mpeg,mpg,ogg,ogv,mov,wmv,mp4,webm,mp3,wav,mid'},
        document: {title: '文档文件', extensions : 'doc,docx,xls,xlsx,ppt,pptx,pdf,wps,txt,xml,kml,md,txt,cnf,conf,ini,yaml,xml'},
        config: {title: '配置文件', extensions : 'mobileconfig,plist,xml,cnf,conf,ini,yaml'}
    };

    let mimeTypes = [];
    if (type == 'image') {
        mimeTypes.push(arrTypes.image);
    } else if (type == 'zip') {
        mimeTypes.push(arrTypes.zip);
    } else if (type == 'android') {
        mimeTypes.push(arrTypes.android);
    } else if (type == 'ios') {
        mimeTypes.push(arrTypes.ios);
    } else if (type == 'mp4') {
        mimeTypes.push(arrTypes.mp4);
    } else if (type == 'media') {
        mimeTypes.push(arrTypes.media);
    } else if (type == 'document') {
        mimeTypes.push(arrTypes.document);
    } else if (type == 'mobile') {
        mimeTypes.push(arrTypes.android);
        mimeTypes.push(arrTypes.ios);
    } else if (type == 'image|document') {
        mimeTypes.push(arrTypes.image);
        mimeTypes.push(arrTypes.document);
    } else if (type == 'all') {
        for (const key in arrTypes) {
            mimeTypes.push(arrTypes[key]);
        }
    } else {
        // 空字符串默认 图片类.
        mimeTypes.push(arrTypes.image);
    }

    return mimeTypes;
}

/**
 * 为demo准备的参数.
 * @returns 
 */
function pluploadMultipartParamsForDemo() {
    var param = {
        'receive_type' : 'plupload',    // 必写. 接收响应格式.
        'ext_type' : 'image',   // 必写. 后端允许的文件格式类型组，多个半角逗号分隔开.
        'module_id' : "demo_module",
        'related_id' : "112233",
        'max_width' : "1024",
        'max_height' : "2000",
        'session_id': "sess__11__22"
    };

    return param;
}

/**
 * 基础上传函数
 * @param string idName 标识
 * @param array isMultiSelection  是否允许多选.
 * @param array mimeTypes  允许UI可选择的扩展名文件
 * @param Object multipartParams 上传组件依赖的入参.
 * @param integer chunkMaxSizeKb 分块上传的单个最大尺寸, 单位kb.
 * @param integer uploadMaxSizeKb 单个最大上传kb.
 * @param bool isMultiPart 是否分块上传.
 * @param Object cbFuncObjs 回掉函数对象.
 * @returns
 */
function pluploadBase(idName, isMultiSelection, mimeTypes, multipartParams, chunkMaxSizeKb, uploadMaxSizeKb, isMultiPart, cbFuncObjs)
{
    var param = pluploadParseUploadParam(idName, isMultiSelection, mimeTypes, multipartParams, chunkMaxSizeKb, uploadMaxSizeKb, isMultiPart);
    param.init = {
        //文件添加
        'FilesAdded' : function(up, files) {
            cbFuncObjs.FilesAdded(idName, up, files);
            // 文件选择后即刻上传.
            this.start();
        },
        //单个文件上传过程中
        'UploadProgress' : function(up, file) {
            cbFuncObjs.UploadProgress(idName, up, file);
        },
        //单个文件成功上传后
        'FileUploaded' : function(up, file, info) {
            cbFuncObjs.FileUploaded(idName, up, file, info);
        },
        //一个队列文件上传完毕后
        'UploadComplete' : function(up, files) {
            cbFuncObjs.UploadComplete(idName, up, files);
        },
        //错误信息反馈
        'Error' : function(up, err) {
            cbFuncObjs.Error(idName, up, err);
        }
    };
    var uploader = new plupload.Uploader(param);
    return uploader;
}

/**
 * 解析上传组件参数.
 * @param string idName 前置标识
 * @param string isMultiSelection 是否允许多选.
 * @param array mimeTypes  允许UI可选择的扩展名文件
 * @param Object multipartParams 上传组件依赖的入参.
 * @param integer chunkMaxSizeKb 分块上传的单个最大尺寸, 单位kb.
 * @param integer uploadMaxSizeKb 单个最大上传kb.
 * @param bool isMultiPart 是否分片上传.
 */
 function pluploadParseUploadParam(idName, isMultiSelection, mimeTypes, multipartParams, chunkMaxSizeKb, uploadMaxSizeKb, isMultiPart) {
    if (typeof(mimeTypes) == 'undefined') {
        mimeTypes = [
            {title : "图像文件", extensions : "jpg,png,gif,webp"}
        ];
    }
    if (typeof(isMultiSelection) == 'undefined') {
    	isMultiSelection = true;
    }
    if (typeof(isMultiPart) == 'undefined') {
    	isMultiPart = true;
    }
    if (typeof(chunkMaxSizeKb) == 'undefined') {
        chunkMaxSizeKb = 0;
    }
    if (typeof(uploadMaxSizeKb) == 'undefined') {
        uploadMaxSizeKb = 0;
    }
    if (typeof(window._PLUP_FILE_FIELD_NAME_) == 'undefined') {
        window._PLUP_FILE_FIELD_NAME_ = 'upload_files';
    }
    idName = idName.toString();
    var param = {
        //'container': null, // ... or DOM Element itself
        'browse_button' : 'pl_btn_select_' + idName,    //选择文件按钮ID
        'url' : window._PLUP_SERVER_URI_,        //请求服务端的URL
        //过滤器
        'filters' : {
            //扩展名
            'mime_types' : mimeTypes,
            //最大单个文件大小
            'max_file_size' : parseInt(uploadMaxSizeKb) * 1024,
            //防止文件重复，根据文件名和文件大小判断的
            'prevent_duplicates' : false
        },
        //是否启用数据流传输结构，true=使用multipart格式并支持chunk大文件分片段上传
        'multipart' : isMultiPart,
        'multi_selection' : isMultiSelection, // true = 支持多个文件选择; false=仅单个文件
        //分块附带参数
        'multipart_params' : multipartParams,
        //最大重试次数
        'max_retries' : 0,
        //大文件分块单元块大小,如果大于0，则表示启用分块传输
        //分块上传将不支持图片尺寸调整、图片水印
        'chunk_size' : parseInt(chunkMaxSizeKb) * 1024,
        //'drop_element' : null,
        'unique_names' : false,         //文件名前端确保唯一性
        'runtimes' : 'html5,flash,silverlight,html4',
        'file_data_name' : window._PLUP_FILE_FIELD_NAME_,
        //'container' : '',
        'flash_swf_url' : window._PLUP_PATH_ + 'js/Moxie.swf',
        'silverlight_xap_url' : window._PLUP_PATH_ + 'js/Moxie.xap'
    };

    return param;
}

/**
 * 上传中的话柄
 * @param {*} idName 
 * @param {*} up 
 * @param {*} file 
 */
function pluploadFuncUploadProgress(idName, up, file)
{
    layui.use(['jquery', 'element', 'layer'], function () {
        let $ = layui.jquery;
        // 隐藏按钮
        var id = 'pl_btn_select_' + idName;
        $('#' + id).hide();
        var hcode = '<span class="u-uploader-progress">文件[' + file.name +']正在上传，进度'+ file.percent + '%</span>';
        $('#pl_progress_'+ idName).html(hcode);
    });
}

/**
 * 单个上传完毕的话柄.
 * @param {*} idName 
 * @param {*} up 
 * @param {*} file 
 * @param {*} info 
 */
function pluploadFuncFileUploaded(idName, up, file, info)
{
    layui.use(['jquery', 'element', 'layer'], function () {
        let $ = layui.jquery;
        var id = 'pl_result_' + idName;
        var obj = $.parseJSON(info.response);
        if (obj.hasOwnProperty('result')) {
            var result = obj.result;
            var hcode = '<li><p>文件链接:' + result.link_url + '</p><img src="" class="result_items" data-ceb-url="'+ result.link_url +'"></li>';
            $('#' + id).append(hcode);
        
            $('#' + id).children('li').each(function(index, ele) {
                if ($(this).children('img').length > 0) {
                    var imgSrc = $(this).children('img').attr('src');
                    if (!imgSrc) {
                        // 优化，仅无src数据才渲染.
                        onceRender($(this).children('img'));
                    }
                }
            });
        } else {
            if (obj.hasOwnProperty('error')) {
                var errorInfo = obj.error;
                var hcode = '<li>['+ errorInfo.code +'错误信息]【'+ file.name +'】'+ errorInfo.message +'</li>';
                $('#' + id).append(hcode);
            }
        }
    });
}

/**
 * 所有选中文件上传完毕后的话柄.
 * @param {*} idName 
 * @param {*} up 
 * @param {*} files 
 */
function pluploadFuncUploadComplete(idName, up, files)
{
    layui.use(['jquery'], function () {
        let $ = layui.jquery;
        $('#pl_status_'+ idName).empty();
        // 显示按钮
        var id = 'pl_btn_select_' + idName;
        $('#' + id).show();
    });
}

/**
 * 遇到错误的话柄.
 * @param {*} idName 
 * @param {*} up 
 * @param {*} err 
 */
function pluploadFuncError(idName, up, err)
{
    layui.use(['jquery', 'element', 'layer'], function () {
        let $ = layui.jquery;
        // 显示按钮
        var id = 'pl_btn_select_' + idName;
        $('#' + id).show();
        var hcode = '【'+ err.code +'】' + err.message;
        $('#pl_status_'+ idName).html(hcode);
    });
}

/**
 * 统一构造话柄的函数
 * @returns 
 */
function pluploadCallbackFuncForDemo()
{
    return {
        UploadProgress: pluploadFuncUploadProgress,
        FileUploaded: pluploadFuncFileUploaded,
        UploadComplete: pluploadFuncUploadComplete,
        Error: pluploadFuncError
    }
}

/**
 * 单个文件上传函数
 * @param string idName 标识
 * @param Object cbFuncObjs 回掉函数对象.
 * @returns
 */
function pluploadOneForDemo(idName, cbFuncObjs)
{
    var mimeTypes = pluploadSelectMime('image');  // 定义可选择的文件类型
    var multipartParams = pluploadMultipartParamsForDemo();
    var chunkMaxSizeKb = 10 * 1024; // 10M
    var uploadMaxSizeKb = 100 * 1024;   //100M
    return pluploadBase(idName, false, mimeTypes, multipartParams, chunkMaxSizeKb, uploadMaxSizeKb, false, cbFuncObjs);
}

/**
 * 多个文件上传函数
 * @param string idName 标识
 * @param Object cbFuncObjs 回掉函数对象.
 * @returns
 */
function pluploadMultiForDemo(idName, cbFuncObjs)
{
    var mimeTypes = pluploadSelectMime('all');  // 定义可选择的文件类型
    var multipartParams = pluploadMultipartParamsForDemo();
    var chunkMaxSizeKb = 12 * 1024; // 20M
    var uploadMaxSizeKb = 80 * 1024;   //80M
    return pluploadBase(idName, true, mimeTypes, multipartParams, chunkMaxSizeKb, uploadMaxSizeKb, true, cbFuncObjs);
}