first commit
This commit is contained in:
223
web/statics/js/upload.js
Normal file
223
web/statics/js/upload.js
Normal file
@@ -0,0 +1,223 @@
|
||||
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 });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user