var upload_pic = [];
var upload_pic_info = [];
var upload_file = [];
var upload = [];
var showUploadE = false;
var showUploadFilesUploadE = false;
var showUploadFilesSearchE = false;
var showUploadFilesSearchState = 1;
var showUploadFilesSearchAll = false;
var upload_search_default = '';
var showUploadUrl;
var showUploadType = 1;
var showUploadCall = false;
var showUploadThis = false;
var showUploadIndex = false;
var picManageE = false;
var picManageI = false;
var picManageV = false;
var picManageLayer = false;
var showUploadFilesValue = [];
//创建监听函数
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;
}
}
function showUploadCover(i,e,key,url,assets,type)
{
layui.use(['upload','layer','element'], function() {
var html = '';
var layer = layui.layer;
var cover = e.attr('data-cover');
var layerConfig = {
type: 1,
title: e.attr('value'),
shade: 0.1,
shadeClose : true,
content: html,
area: ['800px', '500px'],
btn: ['保存', '关闭'],
btnAlign: 'c',
yes: function(index, layero){
var pic = $('#cover_pic').attr('src');
var num = $('#cover_num').val();
var key = $('#cover_key').val();
var video = $('#cover_cur').val();
var copy = url.replace('save.videoCover', 'view.copy');
var i = layer.load(0, {shade: false});
$.getJSON(copy, {json:1,file:pic,num:num,key:key,video:video}, function(t)
{
pic = t.data;
$('#update_' + cover + '_' + cover).val(pic);
$('#show_update_' + cover + '_' + cover).attr('src', pic);
layer.close(i);
layer.close(index);
})
},
btn2: function(index, layero){
layer.close(index);
},
};
e.unbind('click').bind('click', function()
{
var view = url.replace('save', 'view');
showUploadE = e;
if (!type) {
type = 1;
}
showUploadType = type;
showUploadUrl = url;
var cur = $('#' + showUploadE.attr('v')).val();
$.getJSON(view, {json:1,key:key,cur:cur,cover:cover}, function(t)
{
if (showUploadIndex) {
layer.close(showUploadIndex);
}
//layer.closeAll();
layerConfig.content = t.data;
layerConfig.end = function() {
if (showUploadFilesUploadE) {
showUploadFilesUploadE = false;
}
}
showUploadIndex = layer.open(layerConfig);
})
})
});
}
function showUpload(i,e,key,url,assets,type)
{
layui.use(['upload','layer','element'], function() {
var html = '';
var layer = layui.layer;
var layerConfig = {
type: 1,
title: e.attr('value'),
shade: 0.1,
shadeClose : true,
content: html,
area: ['800px', '500px']
};
e.unbind('click').bind('click', function()
{
url = url.replace('save', 'view');
showUploadE = e;
if (!type) {
type = 1;
}
showUploadType = type;
showUploadUrl = url;
var cur = $('#' + showUploadE.attr('v')).val();
var value = '';
if (e.attr('data-value')) {
value = e.attr('data-value');
}
var upload_search = '';
if (e.attr('upload_search')) {
upload_search = e.attr('upload_search');
}
$.getJSON(url, {json:1,key:key,cur:cur,value:value,upload_search:upload_search}, function(t)
{
if (showUploadIndex) {
layer.close(showUploadIndex);
}
//layer.closeAll();
layerConfig.content = t.data;
layerConfig.end = function() {
if (showUploadFilesUploadE) {
showUploadFilesUploadE = false;
}
}
showUploadIndex = layer.open(layerConfig);
})
})
});
}
function editorShowUpload(cur, url, title, func, self)
{
showUploadType = 2;
showUploadCall = func;
showUploadThis = self;
layui.use(['upload','layer','element'], function() {
var html = '';
var layer = layui.layer;
var layerConfig = {
type: 1,
title: title,
shade: 0.1,
shadeClose : true,
content: html,
area: '800px'
};
url = url.replace('save', 'view');
showUploadUrl = url;
$.getJSON(url, {json:1,cur:cur}, function(t)
{
layerConfig.content = t.data;
showUploadIndex = layer.open(layerConfig);
})
});
}
//删除
function showUploadFilesSetState(e, url)
{
if (confirm('确定进行此项操作吗?')) {
$.getJSON(url, {json:1}, function(t)
{
if (!showUploadFilesSearchE) {
showUploadFilesSearchE = $('#showUploadFilesSearch');
}
showUploadFilesSearch(showUploadFilesSearchE, showUploadFilesSearchState,showUploadFilesSearchAll);
})
}
}
function showUploadFilesShowValue(e)
{
var html = e.html();
layer.alert(html);
}
function showUploadFilesSetValue(e, url, id, value)
{
if (showUploadFilesValue[id]) {
value = showUploadFilesValue[id];
}
layer.prompt({
formType: 2,
value: value,
title: '请输入附加值,例子:key1=value1&key2=value2',
area: ['300px', '150px'] //自定义文本域宽高
}, function(value, index, elem){
showUploadFilesValue[id] = value;
$.getJSON(url, {value:value}, function(t){});
layer.close(index);
});
}
function showUploadFilesSet(e, name, url, id)
{
$('.layui-anim-yes').addClass('layui-anim-no');
$('.layui-anim-yes').removeClass('layui-anim-yes');
e.parent().removeClass('layui-anim-no');
e.parent().addClass('layui-anim-yes');
$('.file_cur').val(url);
if (showUploadType == 1) {
var value = showUploadE.attr('v');
var key = showUploadE.attr('key');
loadUploadSet(showUploadE, value, {name:name,url:url}, key);
} else if (showUploadType == 2) {
showUploadCall.call(showUploadThis, url, name, id);
} else if (showUploadType == 3) {
var value = showUploadE.attr('editor_id');
var key = showUploadE.attr('key');
//KindEditor.insertHtml('#' + value, '
');
KindEditor.insertHtml('#' + value, '');
}
if (showUploadIndex) {
layer.close(showUploadIndex);
showUploadIndex = false;
} else {
layer.closeAll();
}
}
function showUploadFilesUpload(e)
{
showUploadFilesUploadE = e;
showUploadE.parent().find('.image_upload').click();
}
function showUploadFilesSearch(e, state, all, pg)
{
showUploadFilesSearchE = e;
showUploadFilesSearchState = state;
var p = e.parent();
if (!pg) {
var pg = p.find('.file_pg').val();
}
var key = p.find('.file_key').val();
var name = p.find('.file_filename').val();
var tag = p.find('.file_tag').val();
var cate = p.find('.file_cate').val();
var cur = p.find('.file_cur').val();
var upload_search = p.find('.upload_search').val();
var state = state;
var url = showUploadUrl;
if (upload_search) {
upload_search_default = upload_search;
}
upload_search = upload_search_default;
if (all) {
upload_search = '';
showUploadFilesSearchAll = true;
} else {
showUploadFilesSearchAll = false;
}
showUploadFiles(url, name, key, cate, tag, cur, pg, upload_search, state);
}
function showUploadFiles(url, name, key, cate, tag, cur, pg, upload_search, state)
{
if (!pg) {
pg = 1;
}
$.getJSON(url, {json:1,key:key, name:name,cate:cate, tag:tag, pg:pg, cur:cur, upload_search:upload_search,state:state}, function(t)
{
var t = '' + t.data + '
';
html = $(t).find('#component-anim').html();
$("#component-anim").html(html);
})
}
function loadUploadL(i,e,key,url,assets)
{
var value = e.attr('v');
var call = e.attr('call');
if (typeof(upload[value]) != "undefined") {
//return;
}
upload[value] = true;
upload_pic[value] = [];
upload_pic_info[value] = [];
upload_file[value] = [];
var id = e.attr('id');
var token = e.attr('token');
var host = e.attr('host');
var domain = e.attr('domain');
var bucket = e.attr('bucket');
var path = e.attr('path');
var cover = e.attr('cover');
var type = e.attr('m');
var search = '';
if (e.attr('upload_search_value')) {
search = e.attr('upload_search_value');
}
if (!cover) {
cover = 1;
}
var uploadUrl = url;
url = domain;
layui.use(['layer','element'], function() {
var layer = layui.layer;
var element = layui.element;
$("#" + id).unbind("change").bind("change",function() {
var file = this.files[0];
if (file) {
element.progress(id + '_progress', '0%');
layer.load();
var filename = file.name;
var temp = filename.split('.');
var name = temp[0];
filename = path + hex_md5(file.name) + '.' + temp[temp.length-1];
//不覆盖
if (cover == 2) {
var timestamp = Date.parse(new Date());
filename = path + hex_md5(file.name + '_' + timestamp) + '.' + temp[temp.length-1];
}
// 设置next,error,complete对应的操作,分别处理相应的进度信息,错误信息,以及完成后的操作
var error = function(err) {
//请求异常回调
layer.alert('文件上传错误');
element.progress(id + '_progress', '0%')
$('#' + id + '_progress').hide();
layer.closeAll('loading');
};
var complete = function(res) {
//&& res.key.match(/\.(jpg|jpeg|png|gif)$/)
if (res.key) {
element.progress(id + '_progress', '0%')
$('#' + id + '_progress').hide();
layer.closeAll('loading');
var data = {};
if (res.hash) {
if (search.indexOf('#') != -1) {
var temp = search.split('#');
search = temp[0];
if (temp[1]) {
temp[1] = $('#update_'+temp[1]+'_value').val();
if (temp[1] > 0) {
search = search + '_' + temp[1];
}
}
}
$.getJSON(uploadUrl.replace('save.start', 'yun.addFile'), {source:file.name,file:res.key, key:key, search:search, call:call});
data.status = 1;
data.name = res.key;
data.url = host + res.key;
loadUploadSet(e,value,data,key);
} else {
layer.alert('文件上传错误');
return false;
}
}
};
if (type == 'qiniu') {
qiniuHandle(id, name, token, domain, bucket, file, filename, element, error, complete);
} else if(type == 'oss') {
ossHandle(id, name, token, domain, bucket, file, filename, element, error, complete);
}
}
});
});
}
function ossHandle(id, name, token, domain, bucket, file, filename, element, error, complete)
{
var temp = token.split('||');
if (temp[0]) {
token = temp[0];
} else {
token = '';
}
let ossConfig = {
// region以杭州为例(oss-cn-hangzhou),其他region按实际情况填写。
region: 'oss-' + domain,
// 阿里云主账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维,请登录RAM控制台创建RAM账号。
accessKeyId: temp[1],
accessKeySecret: temp[2],
bucket: bucket,
}
if (token) {
ossConfig.stsToken = token;
}
let client = new OSS(ossConfig);
let tempCheckpoint;
// 定义上传方法。
async function multipartUpload () {
try {
// object-key可以自定义为文件名(例如file.txt)或目录(例如abc/test/file.txt)的形式,实现将文件上传至当前Bucket或Bucket下的指定目录。
let result = await client.multipartUpload(filename, file, {
progress: function (p, checkpoint) {
$('#' + id + '_progress').show();
element.progress(id + '_progress', parseInt(p*100)+'%')
// 断点记录点。浏览器重启后无法直接继续上传,您需要手动触发上传操作。
tempCheckpoint = checkpoint;
if (p >= 1) {
complete({key:filename,hash:true});
}
},
//meta: { year: 2020, people: 'test' },
//mime: 'image/jpeg'
})
} catch(e){
console.log(e);
error();
}
}
// 开始分片上传。
multipartUpload();
}
function qiniuHandle(id, name, token, domain, bucket, file, filename, element, error, complete)
{
// eslint-disable-next-line
var finishedAttr = [];
// eslint-disable-next-line
var compareChunks = [];
var observable;
var subscription;
var next = function(response) {
var chunks = response.chunks||[];
var total = response.total;
// 这里对每个chunk更新进度,并记录已经更新好的避免重复更新,同时对未开始更新的跳过
for (var i = 0; i < chunks.length; i++) {
if (chunks[i].percent === 0 || finishedAttr[i]){
continue;
}
if (compareChunks[i].percent === chunks[i].percent){
continue;
}
if (chunks[i].percent === 100){
finishedAttr[i] = true;
}
}
$('#' + id + '_progress').show();
element.progress(id + '_progress', parseInt(total.percent)+'%')
compareChunks = chunks;
};
var subObject = {
next: next,
error: error,
complete: complete
};
// 调用sdk上传接口获得相应的observable,控制上传和暂停
var layerConfig = {
useCdnDomain: true,
disableStatisticsReport: false,
retryCount: 6
};
var putExtra = {
fname: "",
params: {"x:name":name},
mimeType: null
};
observable = qiniu.upload(file, filename, token, putExtra, layerConfig);
subscription = observable.subscribe(subObject);
}
function loadUpload(i,e,key,url,assets)
{
var value = e.attr('v');
var call = e.attr('call');
if (typeof(upload[value]) != "undefined") {
//return;
}
upload[value] = true;
upload_pic[value] = [];
upload_pic_info[value] = [];
upload_file[value] = [];
var data = {};
data.key = key;
data.call = call;
var token = e.attr('token');
var host = e.attr('host');
var domain = e.attr('domain');
var path = e.attr('path');
var cover = e.attr('cover');
data.search = '';
if (e.attr('upload_search_value')) {
data.search = e.attr('upload_search_value');
}
if (!cover) {
cover = 1;
}
if (token) {
data.token = token;
}
var uploadUrl = url;
if (domain) {
url = domain;
delete data.key;
//data.key = 2;
}
var id = e.attr('id');
layui.use(['upload','layer','element'], function() {
var layer = layui.layer;
var layuiUpload = layui.upload;
var element = layui.element;
var uploadInst = layuiUpload.render({
elem: '#' + id
,data: data
,field: 'file'
,url: url
,multiple: true
,accept:'file'
//,auto:false
,xhr:xhrOnProgress
,progress:function(value){//上传进度回调 value进度值
$('#' + id + '_progress').show();
element.progress(id + '_progress', value+'%')//设置页面进度条
}
,before: function(obj){
if (this.data.search.indexOf('#') != -1) {
var temp = this.data.search.split('#');
this.data.search = temp[0];
if (temp[1]) {
temp[1] = $('#update_'+temp[1]+'_value').val();
if (temp[1] > 0) {
this.data.search = this.data.search + '_' + temp[1];
}
}
}
}
,choose: function(obj, self){
if (domain) {
obj.editFile(path, cover);
}
element.progress(id + '_progress', '0%')
//layer.load();
}
,done: function(data, file) {
if (data.hash) {
data.status = 1;
data.name = data.key;
data.url = host + data.key;
$.getJSON(uploadUrl.replace('save.start', 'yun.addFile'), {source:file.name,file:data.key, key:key, call:call});
}
element.progress(id + '_progress', '0%')
$('#' + id + '_progress').hide();
layer.closeAll('loading');
if (data.status == 1) {
loadUploadSet(e,value,data,key);
} else {
element.progress(id + '_progress', '0%')
layer.alert(data.message);
return false;
}
}
,error: function(){
//请求异常回调
layer.alert('文件上传错误');
element.progress(id + '_progress', '0%')
$('#' + id + '_progress').hide();
layer.closeAll('loading');
}
});
});
}
function loadUploadSet(e,value,data,key)
{
if (showUploadFilesUploadE) {
showUploadFilesSearch(showUploadFilesUploadE, showUploadFilesSearchState, showUploadFilesSearchAll);
return;
}
var mul = e.attr('mul');
var place = e.attr('place');
if (mul == 'yes') {
if (e.attr('t') == 'file') {
if (upload_file[value].length <= 0 && $("#" + value).val()) {
upload_file[value] = $("#" + value).val().split(',');
}
var m = $('.' +value+'_mul');
var i = m.find('li').eq(upload_file[value].length);
if (i.length) {
i.find('a').eq(0).html(data.name);
} else {
m.append(''+data.name+' [删除]');
}
upload_file[value].push(data.url);
$("#" + value).val(upload_file.join(','));
} else {
var i = e.attr('i');
var info = '';
if (data.width) {
info = data.width + '_' + data.height + '_' +data.size + '_' + data.fid;
}
if (upload_pic[value].length <= 0 && $("#" + value).val()) {
upload_pic[value] = $("#" + value).val().split(',');
}
if ($('#'+i).length) {
upload_pic_info[value] = $("#" + i).val().split(',');
}
var m = $('.' +value+'_mul');
var index = m.find('img').eq(upload_pic[value].length);
var set = index.length;
var place = m.find('.place');
if (place.length) {
set = false;
}
if (set) {
index.attr('src', data.url);
index.attr('data-src', data.url);
index.attr('info', info);
} else {
m.append('');
}
upload_pic[value].push(data.url);
$("#" + value).val(upload_pic[value].join(','));
if ($('#'+i).length && info) {
upload_pic_info[value].push(info);
$('#'+i).val(upload_pic_info[value].join(','));
}
}
} else {
if (e.attr('t') == 'file') {
} else {
var i = e.attr('i');
if ($('#show_'+value).length) {
$('#show_'+value).parent().show();
$('#show_'+value).attr('src',data.url).show();
$('#show_'+value).attr('data-src',data.url);
if (!checkClick($('#show_'+value))) {
$('#show_'+value).unbind('click').bind('click', function()
{
picManage($(this), value, key, 1, i, place);
})
}
}
}
$('#'+value).val(data.url);
if ($('#'+i).length && data.width) {
var info = data.width + '_' + data.height + '_' +data.size + '_' + data.fid;
$('#'+i).val(info);
}
}
}
function picSet(pic, s, info)
{
if (picManageE) {
//$('#'+value).val(data.url);
var img = picManageE.find('img');
var old = img.attr('src');
img.attr('src', pic);
var value = $("#" + picManageV);
value.val(value.val().replace(old, pic));
if (s != 1) {
upload_pic[picManageV].replaceOne(old,pic);
}
var i = picManageI;
if ($('#'+i).length) {
if (s == 1) {
$('#'+i).val(info);
} else {
var old = img.attr('info');
if (old) {
upload_pic_info[picManageV].replaceOne(old,info);
$("#" + i).val(upload_pic_info[picManageV].join(','));
}
}
}
}
layer.close(picManageLayer);
}
function picDel(s)
{
if (!picManageE) {
return;
}
if (confirm('确定要删除图片吗?')) {
var v = picManageV;
var e = picManageE;
var i = picManageI;
if (s == 1) {
e.hide();
$("#" + v).val('');
if ($('#'+i).length) {
$('#'+i).val('');
}
} else {
if (upload_pic[v].length <= 0 && $("#" + v).val()) {
upload_pic[v] = $("#" + v).val().split(',');
}
if (upload_pic_info[v].length <= 0 && $('#'+i).length && $("#" + i).val()) {
upload_pic_info[v] = $("#" + i).val().split(',');
}
var p = e.find('img').attr('src');
e.remove();
upload_pic[v].remove(p);
$("#" + v).val(upload_pic[v].join(','));
if ($('#'+i).length) {
var info = e.find('img').attr('info');
upload_pic_info[v].remove(info);
$("#" + i).val(upload_pic_info[v].join(','));
}
}
}
layer.close(picManageLayer);
}
function picManage(e,v,k,s,i,wh)
{
if (!s) {
s = 2;
}
if (!wh) {
wh = '160*90';
}
picManageE = e;
picManageV = v;
picManageI = i;
var param = '';
var img = e.find('img');
if (img.attr('data-src')) {
var pic = img.attr('data-src');
param = img.attr('src');
} else {
var pic = img.attr('src');
img.attr('data-src', pic);
}
if (pic.indexOf('temp.im') != -1) {
return;
}
if (pic.indexOf('?t=') != -1) {
var temp = pic.split('?');
pic = temp[0];
} else if (pic.indexOf('?') != -1) {
return;
}
var url = config.upload.replace('save', 'view') + '.manage&state='+s+'&key='+k+'&pic=' + pic + '¶m=' + param+'&wh='+wh;
var layerConfig = {
type: 2,
title: '图片裁剪工具',
content : [url, 'no'],
shade: 0.1,
shadeClose : true,
area: ['1000px','550px']
};
picManageLayer = layer.open(layerConfig);
}
function fileDel(e,v)
{
if(confirm('确定要删除文件吗?'))
{
if(upload_file[v].length <= 0 && $("#" + v).val())
{
upload_file[v] = $("#" + v).val().split(',');
}
var parent = e.parent();
var p = parent.find('a').eq(0).attr('href');
parent.remove();
upload_file[v].remove(p);
//console.info(pic);
$("#" + v).val(upload_file[v].join(','));
}
}