LayUI上传附件进度条
目前文件上传基本没有进度提示，可参考如下设置加入进度提示：
-
替换upload.js 增加ajax上传方法
-
前端html多构建一列（上传进度） js需引进element模块（控制进度条显示）
<th style="width: 18%; text-align: center">上传进度</th>
- 上传初始化 upload.render() 加入两个方法配置：progress和xhr，参考代码：
progress: function (value) {//上传进度回调 value进度值
element.progress('demoList', value + '%')//设置页面进度条
}, xhr: function (index, e) {
var percent = e.loaded / e.total;//计算百分比
percent = parseFloat(percent.toFixed(2));
element.progress('progress_' + index + '', percent * 100 + '%');
}
-
可以酌情添加代码逻辑控制上传完成之前选择文件按钮和开始上传按钮禁用 上传完后再启用
-
注意多文件回显时的同样要新增一列，并设置进度为100%
//遍历
for (var i = 0; i < res.data.length; i++) {
var tr = $(['<tr id="upload-' + i + '">',
'<td>' + res.data[i].fileRealName + '</td>',
// '<td>' + res.data[i].fileSize + '</td>',
'<td><div class="layui-progress layui-progress-big" lay-filter="progress_'
+i+'" lay-showpercent="true"><div class="layui-progress-bar" lay-percent="100%"></div></div></td>' ,
'<td>上传成功</td>',
'<td class="myTd">',
'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete" id="' + res.data[i].fileId + '">删除</button>',
'</td>',
'</tr>'].join(''));
element.progress('progress_' + i + '', '100%');
$("#demoList").append(tr)
}
element.render();
具体代码如下：
upload.js:
/**
@Title: layui.upload 文件上传
@Author: 贤心
@License：MIT
*/
layui.define('layer' , function(exports){
"use strict";
var $ = layui.$
,layer = layui.layer
,hint = layui.hint()
,device = layui.device()
//外部接口
,upload = {
config: {} //全局配置项
//设置全局项
,set: function(options){
var that = this;
that.config = $.extend({}, that.config, options);
return that;
}
//事件监听
,on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback);
}
}
//操作当前实例
,thisUpload = function(){
var that = this;
return {
upload: function(files){
that.upload.call(that, files);
}
,config: that.config
}
}
//字符常量
,MOD_NAME = 'upload', ELEM = '.layui-upload', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled'
,ELEM_FILE = 'layui-upload-file', ELEM_FORM = 'layui-upload-form', ELEM_IFRAME = 'layui-upload-iframe', ELEM_CHOOSE = 'layui-upload-choose', ELEM_DRAG = 'layui-upload-drag'
//构造器
,Class = function(options){
var that = this;
that.config = $.extend({}, that.config, upload.config, options);
that.render();
};
//默认配置
Class.prototype.config = {
accept: 'images' //允许上传的文件类型：images/file/video/audio
,exts: '' //允许上传的文件后缀名
,auto: true //是否选完文件后自动上传
,bindAction: '' //手动上传触发的元素
,url: '' //上传地址
,field: 'file' //文件字段名
,method: 'post' //请求上传的http类型
,data: {} //请求上传的额外参数
,drag: true //是否允许拖拽上传
,size: 0 //文件限制大小，默认不限制
,number: 0 //允许同时上传的文件数，默认不限制
,multiple: false //是否允许多文件上传，不支持ie8-9
,xhr:function(){}//此处需要添加
};
//初始渲染
Class.prototype.render = function(options){
var that = this
,options = that.config;
options.elem = $(options.elem);
options.bindAction = $(options.bindAction);
that.file();
that.events();
};
//追加文件域
Class.prototype.file = function(){
var that = this
,options = that.config
,elemFile = that.elemFile = $([
'<input class="'+ ELEM_FILE +'" type="file" accept="'+ options.acceptMime +'" name="'+ options.field +'"'
,(options.multiple ? ' multiple' : '')
,'>'
].join(''))
,next = options.elem.next();
if(next.hasClass(ELEM_FILE) || next.hasClass(ELEM_FORM)){
next.remove();
}
//包裹ie8/9容器
if(device.ie && device.ie < 10){
options.elem.wrap('<div class="layui-upload-wrap"></div>');
}
that.isFile() ? (
that.elemFile = options.elem
,options.field = options.elem[0].name
) : options.elem.after(elemFile);
//初始化ie8/9的Form域
if(device.ie && device.ie < 10){
that.initIE();
}
};
//ie8-9初始化
Class.prototype.initIE = function(){
var that = this
,options = that.config
,iframe = $('<iframe id="'+ ELEM_IFRAME +'" class="'+ ELEM_IFRAME +'" name="'+ ELEM_IFRAME +'" frameborder="0"></iframe>')
,elemForm = $(['<form target="'+ ELEM_IFRAME +'" class="'+ ELEM_FORM +'" method="'+ options.method
,'" key="set-mine" enctype="multipart/form-data" action="'+ options.url +'">'
,'</form>'].join(''));
//插入iframe
$('#'+ ELEM_IFRAME)[0] || $('body').append(iframe);
//包裹文件域
if(!options.elem.next().hasClass(ELEM_IFRAME)){
that.elemFile.wrap(elemForm);
//追加额外的参数
options.elem.next('.'+ ELEM_IFRAME).append(function(){
var arr = [];
layui.each(options.data, function(key, value){
value = typeof value === 'function' ? value() : value;
arr.push('<input type="hidden" name="'+ key +'" value="'+ value +'">')
});
return arr.join('');
}());
}
};
//异常提示
Class.prototype.msg = function(content){
return layer.msg(content, {
icon: 2
,shift: 6
});
};
//判断绑定元素是否为文件域本身
Class.prototype.isFile = function(){
var elem = this.config.elem[0];
if(!elem) return;
return elem.tagName.toLocaleLowerCase() === 'input' && elem.type === 'file'
}
//预读图片信息
Class.prototype.preview = function(callback){
var that = this;
if(window.FileReader){
layui.each(that.chooseFiles, function(index, file){
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
callback && callback(index, file, this.result);
}
});
}
};
//执行上传
Class.prototype.upload = function(files, type){
var that = this
,options = that.config
,elemFile = that.elemFile[0]
//高级浏览器处理方式，支持跨域
,ajaxSend = function(){
var successful = 0, aborted = 0
,items = files || that.files || that.chooseFiles || elemFile.files
,allDone = function(){ //多文件全部上传完毕的回调
if(options.multiple && successful + aborted === that.fileLength){
typeof options.allDone === 'function' && options.allDone({
total: that.fileLength
,successful: successful
,aborted: aborted
});
}
};
//--------------ajax多附件上传--------------
var xhrOnProgress=function(fun) {
xhrOnProgress.onprogress = fun; //绑定监听
//使用闭包实现监听绑
return function() {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
//--------------ajax多附件上传--------------
layui.each(items, function(index, file){
var formData = new FormData();
formData.append(options.field, file);
//追加额外的参数
layui.each(options.data, function(key, value){
value = typeof value === 'function' ? value() : value;
formData.append(key, value);
});
//提交文件
$.ajax({
url: options.url
,type: options.method
,data: formData
,contentType: false
,processData: false
,dataType: 'json'
,headers: options.headers || {}
,success: function(res){
successful++;
done(index, res);
allDone();
}
,error: function(){
aborted++;
that.msg('请求上传接口出现异常');
error(index);
allDone();
},
//--------------ajax多附件上传--------------
xhr:xhrOnProgress(function(e){
//var percent=e.loaded / e.total;//计算百分比
//console.log(percent);
xhr(index,e);
})
//--------------ajax多附件上传--------------
});
});
}
//低版本IE处理方式，不支持跨域
,iframeSend = function(){
var iframe = $('#'+ ELEM_IFRAME);
that.elemFile.parent().submit();
//获取响应信息
clearInterval(Class.timer);
Class.timer = setInterval(function() {
var res, iframeBody = iframe.contents().find('body');
try {
res = iframeBody.text();
} catch(e) {
that.msg('获取上传后的响应信息出现异常');
clearInterval(Class.timer);
error();
}
if(res){
clearInterval(Class.timer);
iframeBody.html('');
done(0, res);
}
}, 30);
}
//统一回调
,done = function(index, res){
that.elemFile.next('.'+ ELEM_CHOOSE).remove();
elemFile.value = '';
if(typeof res !== 'object'){
try {
res = JSON.parse(res);
} catch(e){
res = {};
return that.msg('请对上传接口返回有效JSON');
}
}
typeof options.done === 'function' && options.done(res, index || 0, function(files){
that.upload(files);
});
}
//--------------ajax多附件上传--------------
,xhr = function(index, e){
typeof options.xhr === 'function' && options.xhr(index || 0,e);
}
//--------------ajax多附件上传--------------
//统一网络异常回调
,error = function(index){
if(options.auto){
elemFile.value = '';
}
typeof options.error === 'function' && options.error(index || 0, function(files){
that.upload(files);
});
}
,exts = options.exts
,check ,value = function(){
var arr = [];
layui.each(files || that.chooseFiles, function(i, item){
arr.push(item.name);
});
return arr;
}()
//回调返回的参数
,args = {
preview: function(callback){
that.preview(callback);
}
,upload: function(index, file){
var thisFile = {};
thisFile[index] = file;
that.upload(thisFile);
}
,pushFile: function(){
that.files = that.files || {};
layui.each(that.chooseFiles, function(index, item){
that.files[index] = item;
});
return that.files;
}
}
//提交上传
,send = function(){
if(type === 'choose'){
return options.choose && options.choose(args);
}
//上传前的回调
options.before && options.before(args);
//IE兼容处理
if(device.ie){
return device.ie > 9 ? ajaxSend() : iframeSend();
}
ajaxSend();
}
//校验文件格式
value = value.length === 0
? ((elemFile.value.match(/[^\/\\]+\..+/g)||[]) || '')
: value;
if(value.length === 0) return;
switch(options.accept){
case 'file': //一般文件
if(exts && !RegExp('\\w\\.('+ exts +')$', 'i').test(escape(value))){
that.msg('选择的文件中包含不支持的格式');
return elemFile.value = '';
}
break;
case 'video': //视频文件
if(!RegExp('\\w\\.('+ (exts || 'avi|mp4|wma|rmvb|rm|flash|3gp|flv') +')$', 'i').test(escape(value))){
that.msg('选择的视频中包含不支持的格式');
return elemFile.value = '';
}
break;
case 'audio': //音频文件
if(!RegExp('\\w\\.('+ (exts || 'mp3|wav|mid') +')$', 'i').test(escape(value))){
that.msg('选择的音频中包含不支持的格式');
return elemFile.value = '';
}
break;
default: //图片文件
layui.each(value, function(i, item){
if(!RegExp('\\w\\.('+ (exts || 'jpg|png|gif|bmp|jpeg$') +')', 'i').test(escape(item))){
check = true;
}
});
if(check){
that.msg('选择的图片中包含不支持的格式');
return elemFile.value = '';
}
break;
}
//检验文件数量
that.fileLength = function(){
var length = 0
,items = files || that.files || that.chooseFiles || elemFile.files;
layui.each(items, function(){
length++;
});
return length;
}();
if(options.number && that.fileLength > options.number){
return that.msg('同时最多只能上传的数量为：'+ options.number);
}
//检验文件大小
if(options.size > 0 && !(device.ie && device.ie < 10)){
var limitSize;
layui.each(that.chooseFiles, function(index, file){
if(file.size > 1024*options.size){
var size = options.size/1024;
size = size >= 1
? (Math.floor(size) + (size%1 > 0 ? size.toFixed(1) : 0)) + 'MB'
: options.size + 'KB'
elemFile.value = '';
limitSize = size;
}
});
if(limitSize) return that.msg('文件不能超过'+ limitSize);
}
send();
};
//事件处理
Class.prototype.events = function(){
var that = this
,options = that.config
//设置当前选择的文件队列
,setChooseFile = function(files){
that.chooseFiles = {};
layui.each(files, function(i, item){
var time = new Date().getTime();
that.chooseFiles[time + '-' + i] = item;
});
}
//设置选择的文本
,setChooseText = function(files, filename){
var elemFile = that.elemFile
,value = files.length > 1
? files.length + '个文件'
: ((files[0] || {}).name || (elemFile[0].value.match(/[^\/\\]+\..+/g)||[]) || '');
if(elemFile.next().hasClass(ELEM_CHOOSE)){
elemFile.next().remove();
}
that.upload(null, 'choose');
if(that.isFile() || options.choose) return;
elemFile.after('<span class="layui-inline '+ ELEM_CHOOSE +'">'+ value +'</span>');
};
//点击上传容器
options.elem.off('upload.start').on('upload.start', function(){
var othis = $(this), data = othis.attr('lay-data');
if(data){
try{
data = new Function('return '+ data)();
that.config = $.extend({}, options, data);
} catch(e){
hint.error('Upload element property lay-data configuration item has a syntax error: ' + data)
}
}
that.config.item = othis;
that.elemFile[0].click();
});
//拖拽上传
if(!(device.ie && device.ie < 10)){
options.elem.off('upload.over').on('upload.over', function(){
var othis = $(this)
othis.attr('lay-over', '');
})
.off('upload.leave').on('upload.leave', function(){
var othis = $(this)
othis.removeAttr('lay-over');
})
.off('upload.drop').on('upload.drop', function(e, param){
var othis = $(this), files = param.originalEvent.dataTransfer.files || [];
othis.removeAttr('lay-over');
setChooseFile(files);
if(options.auto){
that.upload(files);
} else {
setChooseText(files);
}
});
}
//文件选择
that.elemFile.off('upload.change').on('upload.change', function(){
var files = this.files || [];
setChooseFile(files);
options.auto ? that.upload() : setChooseText(files); //是否自动触发上传
});
//手动触发上传
options.bindAction.off('upload.action').on('upload.action', function(){
that.upload();
});
//防止事件重复绑定
if(options.elem.data('haveEvents')) return;
that.elemFile.on('change', function(){
$(this).trigger('upload.change');
});
options.elem.on('click', function(){
if(that.isFile()) return;
$(this).trigger('upload.start');
});
if(options.drag){
options.elem.on('dragover', function(e){
e.preventDefault();
$(this).trigger('upload.over');
}).on('dragleave', function(e){
$(this).trigger('upload.leave');
}).on('drop', function(e){
e.preventDefault();
$(this).trigger('upload.drop', e);
});
}
options.bindAction.on('click', function(){
$(this).trigger('upload.action');
});
options.elem.data('haveEvents', true);
};
//核心入口
upload.render = function(options){
var inst = new Class(options);
return thisUpload.call(inst);
};
exports(MOD_NAME, upload);
});
多文件上传示例代码：
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>
<div class="layui-upload-list">
<table class="layui-table" id="fileTable" style="table-layout:fixed;">
<thead>
<tr>
<th style="width: 15%; text-align: center">文件名</th>
<!-- <th style="width: 18%; ">大小</th>-->
<th style="width: 18%; text-align: center">上传进度</th>
<th style="width: 18%; text-align: center">状态</th>
<th style="width: 20%; text-align: center">操作</th>
</tr>
</thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="testListAction" style="display: none">开始上传</button>
</div>
//多文件上传
filesUpload: {
init: function () {
this.initFileList();
},
initFileList: function () {
var chooseData = {};
activeData.uploadData = [];
$('#testListAction').unbind().bind('click', function () {
//禁止按钮
$('#testList').addClass('layui-btn-disabled').attr('disabled',"true");
$('#testListAction').addClass('layui-btn-disabled').attr('disabled',"true");
});
var demoListView = $('#demoList'),
uploadListIns = upload.render({
elem: '#testList',
url: laiease.fileServer,
accept: 'file',
multiple: true,
size: 1048576,
auto: false,
field: "fileName",
bindAction: '#testListAction',
// xhr: xhrOnProgress,
progress: function (value) {//上传进度回调 value进度值
element.progress('demoList', value + '%')//设置页面进度条
},
xhr: function (index, e) {
var percent = e.loaded / e.total;//计算百分比
percent = parseFloat(percent.toFixed(2));
element.progress('progress_' + index + '', percent * 100 + '%');
},
choose: function (obj) {
files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function (index, file, result) {
//选择的数据
chooseData[index] = {};
chooseData[index].name = file.name;
chooseData[index].size = (file.size / 1024).toFixed(1) + 'kb';
chooseData[index].type = file.type;
var tr = $(['<tr id="upload-' + index + '">',
'<td>' + file.name + '</td>',
// '<td>' + (file.size / 1014).toFixed(1) + 'KB</td>',
'<td><div class="layui-progress layui-progress-big" lay-filter="progress_'
+index+'" lay-showPercent="true"><div class="layui-progress-bar" lay-percent="100%"></div></div></td>' ,
'<td>等待上传</td>',
'<td>',
'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
'</td>',
'</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function () {
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
//清空文件列表中的文件--这里不应该用index删除
if(activeData.uploadData.length > 0 ){
for (let i = 0; i < activeData.uploadData.length ; i++) {
if(activeData.uploadData[i].fileIndex == index){
activeData.uploadData.splice(i,1);
}
}
}
//按钮隐藏
if(Object.keys(files) == 0){
$('#testListAction').css('display','none');
}
});
demoListView.append(tr);
});
$('#testListAction').css('display', 'block');
},
done: function (res, index, upload) {
var photo = res.res.data;
if (res.res.code === 40000) { //上传成功
var tr = demoListView.find('tr#upload-' + index),
tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
var fileSaveName = res.res.data.split('/');
$.each(chooseData, function (key, val) {
if (key === index) {
activeData.uploadData.push({
fileSaveName: fileSaveName[fileSaveName.length - 1],
fileRealName: val.name,
fileSize: val.size,
fileType: val.type,
fileIp: laiease.fileServer,
filePath: res.res.data,
fileIndex: index
// taskId: activeData.taskId
});
}
});
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
},
allDone: function (obj) {
element.render();
//成功后解除禁用功能
$('#testListAction').css('display','none');
$('#testList').removeClass('layui-btn-disabled').removeAttr('disabled',"true");
$('#testListAction').removeClass('layui-btn-disabled').removeAttr('disabled',"true");
},
error: function (index, upload) {
var tr = demoListView.find('tr#upload-' + index),
tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
},
},
效果演示：
未上传：
image.png
选择文件：
image.png
上传时：
image.png
上传成功：
image.png
TinyMCE富文本上传视频进度条的实现（需开启上传视频选项）
目前TinyMCE富文本上传是没有进度条的 传视频如果太大不能实时显示 可以参考如下设置增加进度条显示 ：
- 初始化试图时额外增加一个方法（跟富文本的初始化方法同级别）：创建显示进度条
//创建视频上传进度显示框
createProgressBar: function (){
let notification = tinymce.activeEditor.notificationManager.open({
text: '视频上传进度',
progressBar: true
});
let progressbar_dialog_id=notification['_id'];
let progressbar_id=notification.progressBar['_id'];
let progressbar_dialog_node=document.getElementById(progressbar_dialog_id);
let progressbar_node=document.getElementById(progressbar_id);
//最重要的部分：必须使提示框的z-index值不小于68000
progressbar_dialog_node.style['z-index']=70000;
//以下部分调整提示框的样式
progressbar_dialog_node.style['border-radius']='5px';
progressbar_dialog_node.style['border']='1px solid #abdcff';
progressbar_dialog_node.style['background-color']='#f0faff';
progressbar_dialog_node.style['margin-top']='180px';
progressbar_dialog_node.style['margin-left']='20px';
//以下部分调整进度栏的样式,mce-bar-container为容器，mce-bar为实际进度，mce-text为进度数值显示
let mce_bar_container = progressbar_node.querySelector(".mce-bar-container");
let mce_bar = progressbar_node.querySelector(".mce-bar");
let mce_text = progressbar_node.querySelector(".mce-text");
mce_bar_container.style['border-radius']='5px';
mce_bar.style['background-color']='rgb(255, 158, 200)';
return notification;
},
- 初始化富文本时 file_picker_callback 方法改写(增加了进度条显示功能)：
file_picker_callback: function (cb, value, meta) {
//当点击meidia图标上传时,判断meta.filetype == 'media'有必要，因为file_picker_callback是media(媒体)、image(图片)、file(文件)的共同入口
if (meta.filetype === 'media') {
//创建一个隐藏的type=file的文件选择input
let input = document.createElement('input');
input.setAttribute('type', 'file');
input.onchange = function () {
let file = this.files[0];//只选取第一个文件。如果要选取全部，后面注意做修改
let xhr, formData;
xhr = new XMLHttpRequest();
xhr.open('POST', laiease.fileServer);
xhr.withCredentials = false;
var notification = active.view.createProgressBar();
xhr.upload.onprogress = function (e) {
// 进度(e.loaded / e.total * 100)
let percent=e.loaded / e.total * 100;
if(percent<100){
$(".mce-foot").css('display','none')
notification.progressBar.value(percent);
// tinymce.activeEditor.setProgressState(true);//不起作用 是否显示loading状态：1（显示）0（隐藏）
}else{
// tinymce.activeEditor.setProgressState(false); 不起作用
$(".mce-foot").css('display','')
//关闭进度提示
tinymce.activeEditor.notificationManager.close();
}
};
xhr.onerror = function () {
return;
};
xhr.onload = function () {
let json;
if (xhr.status < 200 || xhr.status >= 300) {
console.log('HTTP 错误: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
//接口返回的文件保存地址
let mediaLocation = json.res.data;
//cb()回调函数，将mediaLocation显示在弹框输入框中
cb(mediaLocation, {title: file.name});
}
};
formData = new FormData();
//假设接口接收参数为fileName,值为选中的文件
formData.append('fileName', file);
xhr.send(formData);
};
//触发点击
input.click();
}
},
以下是试图初始化完整代码(根据实际情况)：
//视图
view: {
init: function () {
this.initTinymce();
this.leftComponent.init();
},
initTinymce: function () {
tinymce.init({
selector: 'textarea#tinymce-content',
height: $(window).height() - 270,
theme: 'modern',
language: 'zh_CN',
plugins: 'powerpaste autolink directionality visualblocks visualchars fullscreen image link media codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern ',
toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link media image | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat fullscreen | fontsizeselect',
fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
image_advtab: true,
media_live_embeds:true,
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'
],
images_upload_handler: function (blobInfo, succFun, failFun) {
var xhr, formData;
var file = blobInfo.blob();//转化为易于理解的file对象
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', laiease.fileServer);
xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
xhr.onload = function () {
var json;
if (xhr.status != 200) {
failFun('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
succFun(json.res.data);
}
};
formData = new FormData();
formData.append('fileName', file);//此处与源文档不一样
xhr.send(formData);
},
file_picker_types: 'media',
file_picker_callback: function (cb, value, meta) {
//当点击meidia图标上传时,判断meta.filetype == 'media'有必要，因为file_picker_callback是media(媒体)、image(图片)、file(文件)的共同入口
if (meta.filetype === 'media') {
//创建一个隐藏的type=file的文件选择input
let input = document.createElement('input');
input.setAttribute('type', 'file');
input.onchange = function () {
let file = this.files[0];//只选取第一个文件。如果要选取全部，后面注意做修改
let xhr, formData;
xhr = new XMLHttpRequest();
xhr.open('POST', laiease.fileServer);
xhr.withCredentials = false;
var notification = active.view.createProgressBar();
xhr.upload.onprogress = function (e) {
// 进度(e.loaded / e.total * 100)
let percent=e.loaded / e.total * 100;
if(percent<100){
$(".mce-foot").css('display','none')
notification.progressBar.value(percent);
// tinymce.activeEditor.setProgressState(true);//不起作用 是否显示loading状态：1（显示）0（隐藏）
}else{
// tinymce.activeEditor.setProgressState(false); 不起作用
$(".mce-foot").css('display','')
//关闭进度提示
tinymce.activeEditor.notificationManager.close();
}
};
xhr.onerror = function () {
return;
};
xhr.onload = function () {
let json;
if (xhr.status < 200 || xhr.status >= 300) {
console.log('HTTP 错误: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
//接口返回的文件保存地址
let mediaLocation = json.res.data;
//cb()回调函数，将mediaLocation显示在弹框输入框中
cb(mediaLocation, {title: file.name});
}
};
formData = new FormData();
//假设接口接收参数为fileName,值为选中的文件
formData.append('fileName', file);
xhr.send(formData);
};
//触发点击
input.click();
}
},
init_instance_callback: function () {
}
});
},
//创建视频上传进度显示框
createProgressBar: function (){
let notification = tinymce.activeEditor.notificationManager.open({
text: '视频上传进度',
progressBar: true
});
let progressbar_dialog_id=notification['_id'];
let progressbar_id=notification.progressBar['_id'];
let progressbar_dialog_node=document.getElementById(progressbar_dialog_id);
let progressbar_node=document.getElementById(progressbar_id);
//最重要的部分：必须使提示框的z-index值不小于68000
progressbar_dialog_node.style['z-index']=70000;
//以下部分调整提示框的样式
progressbar_dialog_node.style['border-radius']='5px';
progressbar_dialog_node.style['border']='1px solid #abdcff';
progressbar_dialog_node.style['background-color']='#f0faff';
progressbar_dialog_node.style['margin-top']='180px';
progressbar_dialog_node.style['margin-left']='20px';
//以下部分调整进度栏的样式,mce-bar-container为容器，mce-bar为实际进度，mce-text为进度数值显示
let mce_bar_container = progressbar_node.querySelector(".mce-bar-container");
let mce_bar = progressbar_node.querySelector(".mce-bar");
let mce_text = progressbar_node.querySelector(".mce-text");
mce_bar_container.style['border-radius']='5px';
mce_bar.style['background-color']='rgb(255, 158, 200)';
return notification;
},
leftComponent: {
init: function () {
this.initTitle();
this.initMain();
this.initImage();
},
initTitle: function () {
admin.req({
url: './data/title.json',
type: 'get',
done: function (res) {
var data = res.data,
html = '';
$.each(data, function (index, val) {
var key = 'title' + index;
html += val[key];
});
$('.title-content').html(html);
active.view.leftComponent.initBtnEvents();
}
});
},
initMain: function () {
admin.req({
url: './data/main.json',
type: 'get',
done: function (res) {
var data = res.data,
html = '';
$.each(data, function (index, val) {
var key = 'title' + index;
html += val[key];
});
$('.main-content').html(html);
active.view.leftComponent.initBtnEvents();
}
});
},
initImage: function () {
admin.req({
url: './data/image.json',
type: 'get',
done: function (res) {
var data = res.data,
html = '';
$.each(data, function (index, val) {
var key = 'title' + index;
html += val[key];
});
$('.image-content').html(html);
active.view.leftComponent.initBtnEvents();
}
});
},
initBtnEvents: function () {
$('.style-item').unbind();
$('.style-item').bind('click', function () {
tinyMCE.activeEditor.insertContent($(this).html());
});
}
},
},
注意：创建进度条方法中有属性设置进度条的位置，目前尚未明确基于什么父元素定位，若出现进度条偏离 异于演示效果 请酌情根据自己的界面调整即可
效果演示：
image.png
image.png
image.png
网友评论