/** * 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 = '文件[' + file.name +']正在上传,进度'+ file.percent + '%'; $('#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 = '
文件链接:' + result.link_url + '