223 lines
8.5 KiB
JavaScript
223 lines
8.5 KiB
JavaScript
layui.use(['form', 'jquery'], function () {
|
||
let form = layui.form;
|
||
let $ = layui.jquery;
|
||
let layer = layui.layer;
|
||
let upload = layui.upload;
|
||
let element = layui.element;
|
||
let util = layui.util;
|
||
|
||
var suffix = '_logo';
|
||
var imgPath = $('#upload_img_input_logo').val();
|
||
|
||
setImgInfo(imgPath);
|
||
preview();
|
||
removeImg();
|
||
uploadFn();
|
||
bindRemove();
|
||
|
||
// 设置图片信息
|
||
function setImgInfo(url) {
|
||
if (url === '/statics/admin/images/avatar.jpg') {
|
||
$('#upload_img_preview' + suffix).attr('src', url);
|
||
} else {
|
||
$('#upload_img_preview' + suffix).attr('src', url);
|
||
}
|
||
if (url === '') {
|
||
$('#upload_img_preview' + suffix).hide();
|
||
} else {
|
||
$('#upload_img_preview' + suffix).show();
|
||
}
|
||
$('#upload_img_input_logo').val(url);
|
||
}
|
||
|
||
// 删除
|
||
function removeImg() {
|
||
$('#upload_img_remove' + suffix).unbind('click').click(function () {
|
||
$('#upload_img_preview' + suffix).attr({ src: '', alt: '暂无图片' });
|
||
$('#upload_img_input_logo').val('');
|
||
});
|
||
}
|
||
|
||
// 图片预览
|
||
function preview() {
|
||
$('#upload_img_preview' + suffix).unbind('click').click(function () {
|
||
var url = $(this).attr('src')
|
||
if (!url) { return false; }
|
||
|
||
layer.photos({
|
||
photos: {
|
||
"title": url,
|
||
"start": 0,
|
||
"data": [
|
||
{
|
||
"alt": "",
|
||
"pid": 5,
|
||
"src": url,
|
||
}
|
||
]
|
||
},
|
||
footer: false
|
||
});
|
||
});
|
||
}
|
||
|
||
// 设置文件集
|
||
function setFiles(data) {
|
||
var html = '';
|
||
var val = '';
|
||
for (var i = 0; i < data.length; i++) {
|
||
var item = data[i];
|
||
var d = item.name + `|` + item.path;
|
||
var li = `<div class="upload-line">
|
||
<span class="op">
|
||
<a href="javascript:;" data-path=` + d + ` class="layui-btn layui-btn-danger layui-btn-xs remove_file">删除</a>
|
||
<a href="`+ item.path + `" target="_blank" style="margin-left: 2px;" class="layui-btn layui-btn-xs">下载</a>
|
||
</span>
|
||
<span class="name"><label>名称: </label>`+ item.name + `</span>
|
||
<span class="url"><label>URL: </label>`+ item.path + `</span>
|
||
</div>`;
|
||
html += li;
|
||
|
||
val += d + ",";
|
||
}
|
||
$('#mutil_upload_res_list').append(html);
|
||
var $doc = $('input[name="Paths"]');
|
||
if ($doc.val() != '') {
|
||
val = $doc.val() + val;
|
||
}
|
||
$('#post_field').html(`<input type="hidden" name="Paths" value="` + val + `">`);
|
||
bindRemove();
|
||
}
|
||
|
||
function bindRemove() {
|
||
$('.remove_file').unbind('click').click(function () {
|
||
var path = $(this).data('path');
|
||
var $doc = $('input[name="Paths"]');
|
||
let paths = $doc.val();
|
||
$doc.val(paths.replace(path, ""));
|
||
$(this).parent().parent().remove();
|
||
});
|
||
}
|
||
|
||
// 上传
|
||
function uploadFn() {
|
||
var uploadInst = upload.render({
|
||
elem: '#upload_img_btn' + suffix,
|
||
url: '/upload/img',
|
||
headers: { 'X-CSRF-Token': $('#csrf_token').val() },
|
||
field: 'files',
|
||
accept: 'file', //允许上传的文件类型
|
||
before: function (obj) {
|
||
// 预读本地文件示例，不支持ie8
|
||
obj.preview(function (index, file, result) {
|
||
$('#upload_img_preview' + suffix).attr('src', result); // 图片链接（base64）
|
||
});
|
||
element.progress('upload_img_progress' + suffix, '0%'); // 进度条复位
|
||
layer.msg('上传中', { icon: 16, time: 0 });
|
||
},
|
||
done: function (res) {
|
||
// 若上传失败
|
||
if (!res.success) {
|
||
return layer.msg('上传失败：' + res.errorMsg);
|
||
}
|
||
// 上传成功的一些操作
|
||
// …
|
||
$('#upload_img_tips' + suffix).html(''); // 置空上传失败的状态
|
||
setImgInfo(res.data);
|
||
removeImg();
|
||
},
|
||
error: function () {
|
||
// 失败状态，并实现重传
|
||
var $tips = $('#upload_img_tips' + suffix);
|
||
$tips.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
||
$tips.find('.demo-reload').on('click', function () {
|
||
uploadInst.upload();
|
||
});
|
||
},
|
||
// 进度条
|
||
progress: function (n, elem, e) {
|
||
element.progress('upload_img_progress' + suffix, n + '%'); // 可配合 layui 进度条元素使用
|
||
if (n == 100) {
|
||
layer.msg('上传完毕', { icon: 1 });
|
||
}
|
||
}
|
||
});
|
||
|
||
var uploadFiles = upload.render({
|
||
elem: '#upload_img_btn_file',
|
||
url: '/upload/file',
|
||
headers: { 'X-CSRF-Token': $('#csrf_token').val() },
|
||
field: 'files',
|
||
accept: 'file', //允许上传的文件类型
|
||
before: function (obj) {
|
||
element.progress('upload_img_progress' + suffix, '0%'); // 进度条复位
|
||
layer.msg('上传中', { icon: 16, time: 0 });
|
||
},
|
||
done: function (res) {
|
||
// 若上传失败
|
||
if (!res.success) {
|
||
return layer.msg('上传失败：' + res.errorMsg);
|
||
}
|
||
// 上传成功的一些操作
|
||
// …
|
||
$('#upload_img_tips' + suffix).html(''); // 置空上传失败的状态
|
||
setImgInfo(res.data);
|
||
removeImg();
|
||
},
|
||
error: function () {
|
||
// 失败状态，并实现重传
|
||
var $tips = $('#upload_img_tips' + suffix);
|
||
$tips.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
||
$tips.find('.demo-reload').on('click', function () {
|
||
uploadFiles.upload();
|
||
});
|
||
},
|
||
// 进度条
|
||
progress: function (n, elem, e) {
|
||
element.progress('upload_img_progress' + suffix, n + '%'); // 可配合 layui 进度条元素使用
|
||
if (n == 100) {
|
||
layer.msg('上传完毕', { icon: 1 });
|
||
}
|
||
}
|
||
});
|
||
|
||
var uploadMutilFiles = upload.render({
|
||
elem: '#upload_multi_btn',
|
||
url: '/upload/mutilfile',
|
||
headers: { 'X-CSRF-Token': $('#csrf_token').val() },
|
||
field: 'files',
|
||
multiple: true,
|
||
unified: true,
|
||
accept: 'file', //允许上传的文件类型
|
||
before: function (obj) {
|
||
element.progress('upload_mutil_progress' + suffix, '0%'); // 进度条复位
|
||
layer.msg('上传中', { icon: 16, time: 0 });
|
||
},
|
||
done: function (res) {
|
||
// 若上传失败
|
||
if (!res.success) {
|
||
return layer.msg('上传失败：' + res.errorMsg);
|
||
}
|
||
// 上传成功的一些操作
|
||
$('#upload_mutil_tips' + suffix).html(''); // 置空上传失败的状态
|
||
// 设置文件集
|
||
setFiles(res.data);
|
||
},
|
||
error: function () {
|
||
// 失败状态，并实现重传
|
||
var $tips = $('#upload_mutil_tips' + suffix);
|
||
$tips.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
||
$tips.find('.demo-reload').on('click', function () {
|
||
uploadMutilFiles.upload();
|
||
});
|
||
},
|
||
// 进度条
|
||
progress: function (n, elem, e) {
|
||
element.progress('upload_mutil_progress' + suffix, n + '%'); // 可配合 layui 进度条元素使用
|
||
if (n == 100) {
|
||
layer.msg('上传完毕', { icon: 1 });
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}); |