281 lines
11 KiB
JavaScript
281 lines
11 KiB
JavaScript
layui.use(['jquery', 'upload'], function () {
|
||
let $ = layui.jquery;
|
||
let upload = layui.upload;
|
||
|
||
// 失去焦点刷新
|
||
$('body').on('blur', '.upload-file-value', 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 demoHtml = `<div class="layui-form-item layui-row">
|
||
<label class="layui-form-label">封面:</label>
|
||
<div class="layui-inline layui-col-xs12 layui-col-md8">
|
||
<div class="layui-row upload-file-div">
|
||
<div class=" layui-col-xs12 layui-col-md8">
|
||
<input class="layui-input upload-file-value" name="cover" type="text" value="{$item.cover ?? ''}">
|
||
<div class="layui-form-mid layui-word-aux">图片尺寸：500px*800px</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md3">
|
||
<span>
|
||
<button type="button" class="layui-btn layui-btn-danger upload-btn">
|
||
<i class="fa fa-upload"></i> 上传
|
||
<div class="cut-list ">
|
||
<!-- 裁剪参数如下 若不需要裁剪则不填写 data-name=裁剪后缀名 width=裁剪宽度 height=裁剪高度 -->
|
||
<!-- 若上传图片的基础图片路径=/aa/bb/cc.jpg -->
|
||
<!-- 生成 /aa/bb/cc_pc.jpg (尺寸500*800) -->
|
||
<div class="cut-info" data-name="pc" data-width="500" data-height="800"></div>
|
||
<!-- 生成 /aa/bb/cc_phone.jpg (尺寸300*500) -->
|
||
<div class="cut-info" data-name="phone" data-width="300" data-height="500"></div>
|
||
</div>
|
||
</button>
|
||
</span>
|
||
<!-- data-type=上传类型 data-multiple=是否多文件上传 data-url=从哪选择文件 -->
|
||
<span><button type="button" class="layui-btn layui-btn-primary upload-choose-btn" data-type="image" data-multiple="false"><i class="fa fa-list"></i> 选择</button></span>
|
||
</div>
|
||
<ul class="layui-row layui-col-xs12 layui-col-md9 preview-list layui-col-space5"></ul>
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
|
||
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')
|
||
}
|
||
|
||
// 添加裁剪支持
|
||
let cut = [];
|
||
if (that.find('.cut-info').each(function (index, item) {
|
||
cut.push({name: $(item).data('name'), width: $(item).data('width'), height: $(item).data('height')})
|
||
}))
|
||
param['cut'] = JSON.stringify(cut)
|
||
|
||
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 (ext === 'mp4' || ext === 'ogv' || ext === 'webm' || ext === 'avi') {
|
||
src = '/static/manager/image/video.png';
|
||
} else if (ext !== 'jpg' && ext !== 'jpeg' && ext !== 'png' && ext !== 'gif' && ext !== 'bmp') {
|
||
src = '/static/manager/image/file.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);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
} |