247 lines
9.0 KiB
JavaScript
Executable File
247 lines
9.0 KiB
JavaScript
Executable File
layui.use(['jquery', 'upload'], function () {
|
||
let $ = layui.jquery;
|
||
let upload = layui.upload;
|
||
|
||
// 失去焦点刷新
|
||
$('.upload-file-value').blur(function () {
|
||
initPreviewList();
|
||
});
|
||
|
||
$('body').on('click', '.upload-choose-btn', function () {
|
||
$('.upload-choose-btn').removeClass('choose-open');
|
||
$(this).addClass('choose-open');
|
||
let type = $(this).data('type') ? $(this).data('type') : 'all';
|
||
let multiple = $(this).data('multiple') ? $(this).data('multiple') : false;
|
||
let url = $(this).data('url') ? $(this).data('url') : '/manager/attachment/file';
|
||
url += '?selected=true&type=' + type + '&multiple=' + multiple;
|
||
openLayer(url, '素材列表', '80%', '80%');
|
||
})
|
||
|
||
// 多个上传组件 多个实例
|
||
$('.upload-btn').each(function (index, item) {
|
||
let that = $(this);
|
||
let idx = 'upload-btn-' + index;
|
||
that.addClass(idx);
|
||
|
||
let url = that.data('url') ? that.data('url') : '/manager/upload/image';
|
||
let field = that.data('field') ? that.data('field') : 'image_image';
|
||
let multiple = that.data('multiple') ? that.data('multiple') : false;
|
||
let accept = that.data('accept') ? that.data('accept') : 'images'; //images（图片）、file（所有文件）、video（视频）、audio（音频）
|
||
let acceptMime = that.data('mimetype') ? that.data('mimetype') : 'images/*';
|
||
let exts = that.data('exts') ? that.data('exts') : 'jpg|png|gif|bmp|jpeg';
|
||
let maxSize = that.data('size') ? that.data('size') : 50 * 1204; //KB
|
||
let size = maxSize; //size KB
|
||
let number = that.data('number') ? that.data('number') : 0;
|
||
let param = [];
|
||
if (that.data('path') && that.data('path') !== undefined) {
|
||
param['path'] = that.data('path')
|
||
}
|
||
|
||
upload.render({
|
||
elem: '.upload-btn-' + index
|
||
, url: url
|
||
, auto: true
|
||
, field: field
|
||
, accept: accept
|
||
, acceptMime: acceptMime
|
||
, exts: exts
|
||
, size: size
|
||
, number: number
|
||
, multiple: multiple
|
||
, data: param
|
||
, before: function (obj) {
|
||
layer.load(2);
|
||
}
|
||
, done: function (res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”
|
||
layer.closeAll('loading'); //关闭loading
|
||
let item = this.item;
|
||
let div = item.parents('.upload-file-div');
|
||
let existsNotice = item.data('notice-exists');//已存在文件是否提示 默认不提示
|
||
let callback = item.data('callback');//上传成功执行函数
|
||
if (callback) {
|
||
eval(callback);
|
||
}
|
||
|
||
// 200=已存在文件 0=新上传成功
|
||
if (res.code === 0 || res.code === 200) {
|
||
let inputValue = '';
|
||
// 如果是多文件上传 则追加 否则 替换
|
||
if (multiple) {
|
||
inputValue = $(div).find('.upload-file-value').val();
|
||
if (inputValue.length > 0) {
|
||
inputValue += ',';
|
||
}
|
||
}
|
||
inputValue += res.data.src;
|
||
|
||
$(div).find('.upload-file-value').val(inputValue);
|
||
initPreviewList();
|
||
if (existsNotice && res.code === 200) {
|
||
layer.alert(res.msg);
|
||
}
|
||
} else {
|
||
layer.msg(res.msg);
|
||
}
|
||
}
|
||
});
|
||
})
|
||
|
||
// 图片上传 删除
|
||
$('body').on('click', '.del-preview-img', function () {
|
||
$(this).parent('li').remove();
|
||
refreshInputByUl();
|
||
})
|
||
})
|
||
|
||
// 根据预览图片列表 刷新input值
|
||
function refreshInputByUl() {
|
||
layui.use(['jquery'], function () {
|
||
let $ = layui.jquery;
|
||
|
||
$('.upload-file-div .preview-list').each(function () {
|
||
let currentLiList = '';
|
||
let liList = $(this).find('li');
|
||
let len = liList.length;
|
||
liList.each(function (index, item) {
|
||
currentLiList += $(this).find('img').data('img');
|
||
if (index !== (len - 1) || index !== 0) {
|
||
currentLiList += ',';
|
||
}
|
||
})
|
||
//去除首尾逗号
|
||
currentLiList = currentLiList.replace(/(^\,*)|(\,*$)/g, "");
|
||
$(this).parents('.upload-file-div').find('.upload-file-value').val(currentLiList);
|
||
})
|
||
})
|
||
}
|
||
|
||
// 根据input 刷新预览图片列表
|
||
function initPreviewList() {
|
||
layui.use(['jquery'], function () {
|
||
let $ = layui.jquery;
|
||
let input = $('.upload-file-value');
|
||
if (input.length > 0) {
|
||
input.each(function () {
|
||
let that = $(this);
|
||
let fileList = that.val();
|
||
let fileArr = [];
|
||
let html = '';
|
||
|
||
if (fileList) {
|
||
fileArr = fileList.split(',');
|
||
}
|
||
if (fileArr.length > 0) {
|
||
$.each(fileArr, function (index, item) {
|
||
let ext = item.split('.');
|
||
let src = getFileRequestUrl(item);
|
||
let aLink = getFileRequestUrl(item);
|
||
ext = ext[ext.length - 1];
|
||
|
||
// let prefix = src.substr(0, 4)
|
||
|
||
// if (prefix !== 'http') {
|
||
if (ext !== 'jpg' && ext !== 'jpeg' && ext !== 'png' && ext !== 'gif' && ext !== 'bmp') {
|
||
src = '/static/manager/image/file.png';
|
||
}
|
||
|
||
if (ext === 'mp4' || ext === 'ogv' || ext === 'webm') {
|
||
src = '/static/manager/image/video.png';
|
||
}
|
||
// }
|
||
|
||
html += `<li class="layui-col-xs12 layui-col-md2 preview-li">
|
||
<a href="${aLink}" target="_blank" class="preview-li-img">
|
||
<img src="${src}" data-img="${item}">
|
||
</a>
|
||
<a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-danger del-preview-img">
|
||
<i class="fa fa-trash-o"></i> 删除
|
||
</a>
|
||
</li>`;
|
||
})
|
||
}
|
||
that.parents('.upload-file-div').find('.preview-list').html(html);
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
initPreviewList();
|
||
|
||
/**
|
||
* 动态加载元素触发绑定上传事件
|
||
* @param eid 必须为控件ID
|
||
*/
|
||
function renderUpload(eid) {
|
||
layui.use(['jquery', 'upload'], function () {
|
||
let $ = layui.jquery, upload = layui.upload;
|
||
let url = '/manager/upload/image';
|
||
let field = 'image_image';
|
||
let multiple = false;
|
||
let accept = 'images';
|
||
let acceptMime = 'images/*';
|
||
let exts = 'jpg|png|gif|bmp|jpeg';
|
||
let size = 10 * 1024; //size KB
|
||
|
||
let that = $(eid);
|
||
|
||
if (that.data('url')) {
|
||
url = that.data('url');
|
||
}
|
||
if (that.data('field')) {
|
||
field = that.data('field');
|
||
}
|
||
if (that.data('multiple')) {
|
||
multiple = that.data('multiple');
|
||
}
|
||
if (that.data('accept')) {
|
||
accept = that.data('accept');
|
||
}
|
||
if (that.data('mimetype')) {
|
||
acceptMime = that.data('mimetype');
|
||
}
|
||
if (that.data('exts')) {
|
||
exts = that.data('exts');
|
||
}
|
||
if (that.data('number')) {
|
||
number = that.data('number');
|
||
}
|
||
|
||
|
||
upload.render({
|
||
elem: eid
|
||
, url: url
|
||
, auto: true
|
||
, field: field
|
||
, accept: accept
|
||
, acceptMime: acceptMime
|
||
, exts: exts
|
||
, size: size
|
||
, number: 0
|
||
, multiple: multiple
|
||
, before: function (obj) {
|
||
layer.load(2);
|
||
}
|
||
, done: function (res, index, upload) {
|
||
layer.closeAll('loading');
|
||
let item = this.item;
|
||
let div = item.parents('.upload-file-div');
|
||
if (res.code === 0) {
|
||
let inputValue = '';
|
||
// 如果是多文件上传 则追加 否则 替换
|
||
if (multiple) {
|
||
inputValue = $(div).find('.upload-file-value').val();
|
||
if (inputValue.length > 0) {
|
||
inputValue += ',';
|
||
}
|
||
}
|
||
inputValue += res.data.src;
|
||
|
||
$(div).find('.upload-file-value').val(inputValue);
|
||
initPreviewList();
|
||
} else {
|
||
layer.msg(res.msg);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
} |