处理问题
This commit is contained in:
parent
7d73684052
commit
787de7293b
507
common/src/main/resources/static/assets/js/layui-util.js
Normal file
507
common/src/main/resources/static/assets/js/layui-util.js
Normal file
@ -0,0 +1,507 @@
|
||||
function LayuiUtil(layui, viewer) {
|
||||
var $ = layui.$;
|
||||
var layer = layui.layer;
|
||||
var upload = layui.upload;
|
||||
var laydate = layui.laydate;
|
||||
var form = layui.form;
|
||||
var Viewer = viewer;
|
||||
var restAjax = layui.restajax;
|
||||
var viewerObj = {};
|
||||
|
||||
/**
|
||||
* 上传图片
|
||||
* @param opt
|
||||
*/
|
||||
this.initUploadImage = function (opt) {
|
||||
var maxCount = opt.maxCount ? parseInt(opt.maxCount) : 9
|
||||
maxCount = opt.maxCount < 0 ? 9 : opt.maxCount;
|
||||
var fieldName = opt.fieldName;
|
||||
var isShow = opt.isShow;
|
||||
var defaultAllowExts = ['jpg', 'png', 'gif', 'bmp', 'jpeg'];
|
||||
var allowExts = opt.allowExts;
|
||||
allowExts = allowExts && (allowExts instanceof Array) ? defaultAllowExts.concat(allowExts).join('\\|') : defaultAllowExts.join('\\|');
|
||||
|
||||
var defaultAcceptMime = ['image/*'];
|
||||
var acceptMime = opt.acceptMime;
|
||||
acceptMime = acceptMime && (acceptMime instanceof Array) ? defaultAcceptMime.concat(acceptMime).join(',') : defaultAcceptMime.join(',');
|
||||
|
||||
var id = '#' + fieldName;
|
||||
var fileBoxId = id + 'FileBox';
|
||||
var uploadBtnId = id + 'UploadBtn';
|
||||
var deleteBtnClass = '.delete-' + fieldName + '-btn';
|
||||
|
||||
function init(callback) {
|
||||
var fileIds = $(id).val();
|
||||
var fileIdArray = fileIds ? fileIds.split(',') : [];
|
||||
|
||||
var html = '';
|
||||
for (var i = 0, fileId; fileId = fileIdArray[i++];) {
|
||||
html += [
|
||||
'<div class="form-upload-image">',
|
||||
' <img src="route/file/download/true/' + fileId + '" align="加载失败">',
|
||||
' <a class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" href="javascript:void(0);" data-id="' + fileId + '" data-name="' + fieldName + '">',
|
||||
' <i class="fa fa-trash-o"></i>',
|
||||
' </a>',
|
||||
'</div>',
|
||||
].join('');
|
||||
}
|
||||
|
||||
$(fileBoxId).empty();
|
||||
$(fileBoxId).append(html);
|
||||
|
||||
if (fileIdArray.length < maxCount) {
|
||||
$(uploadBtnId).removeClass('layui-btn-disabled');
|
||||
$(uploadBtnId).attr('disabled', false);
|
||||
} else {
|
||||
$(uploadBtnId).addClass('layui-btn-disabled');
|
||||
$(uploadBtnId).attr('disabled', true);
|
||||
}
|
||||
|
||||
callback ? callback() : '';
|
||||
}
|
||||
|
||||
function addClick() {
|
||||
var layerLoadingIndex;
|
||||
upload.render({
|
||||
elem: uploadBtnId,
|
||||
url: 'api/file/v2/upload-image',
|
||||
accept: 'images',
|
||||
acceptMime: acceptMime,
|
||||
field: 'image',
|
||||
exts: allowExts,
|
||||
name: fieldName,
|
||||
before: function (obj) {
|
||||
layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3})
|
||||
},
|
||||
done: function (res, index, upload) {
|
||||
layer.close(layerLoadingIndex);
|
||||
var name = this.name;
|
||||
var files = $('#' + this.name).val();
|
||||
if (files.length > 0) {
|
||||
files += ',';
|
||||
}
|
||||
files += res.data.fileId;
|
||||
$('#' + name).val(files);
|
||||
init(function () {
|
||||
viewerObj[name].update();
|
||||
});
|
||||
},
|
||||
error: function (index, upload) {
|
||||
layer.close(layerLoadingIndex);
|
||||
layer.msg('文件上传失败');
|
||||
},
|
||||
progress: function (n, elem, res, index) {
|
||||
}
|
||||
});
|
||||
$(document).on('click', deleteBtnClass, function () {
|
||||
var name = this.dataset.name;
|
||||
var id = this.dataset.id;
|
||||
var files = $('#' + name).val().replace(id, '');
|
||||
files = files.replace(/\,+/g, ',');
|
||||
if (files.charAt(0) == ',') {
|
||||
files = files.substring(1);
|
||||
}
|
||||
if (files.charAt(files.length - 1) == ',') {
|
||||
files = files.substring(0, files.length - 1);
|
||||
}
|
||||
$('#' + name).val(files);
|
||||
init(function () {
|
||||
viewerObj[name].update();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
init(function () {
|
||||
viewerObj[fieldName] = new Viewer(document.getElementById(fieldName + 'FileBox'), {navbar: false});
|
||||
});
|
||||
|
||||
if (!isShow) {
|
||||
addClick();
|
||||
} else {
|
||||
$(uploadBtnId).hide();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传文件
|
||||
* @param opt
|
||||
*/
|
||||
this.initUploadFile = function (opt) {
|
||||
var maxCount = opt.maxCount ? parseInt(opt.maxCount) : 3
|
||||
maxCount = opt.maxCount < 0 ? 3 : opt.maxCount;
|
||||
var fieldName = opt.fieldName;
|
||||
var isShow = opt.isShow;
|
||||
var allowExts = opt.allowExts;
|
||||
var defaultAllowExts = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'wps', 'txt', 'rar', 'zip'];
|
||||
allowExts = allowExts && (allowExts instanceof Array) ? defaultAllowExts.concat(allowExts).join('\\|') : defaultAllowExts.join('\\|');
|
||||
var defaultAcceptMime = [
|
||||
'application/pdf',
|
||||
'application/msword',
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
'application/vnd.ms-excel',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
'application/vnd.ms-powerpoint',
|
||||
'application/vnd.openxmlformats-officedocument.presentationml.presentation',
|
||||
'application/vnd.ms-works',
|
||||
'text/plain',
|
||||
'application/x-rar',
|
||||
'application/x-zip-compressed'
|
||||
];
|
||||
var acceptMime = opt.acceptMime;
|
||||
acceptMime = acceptMime && (acceptMime instanceof Array) ? defaultAcceptMime.concat(acceptMime).join(',') : defaultAcceptMime.join(',');
|
||||
|
||||
var id = '#' + fieldName;
|
||||
var fileBoxId = id + 'FileBox';
|
||||
var uploadBtnId = id + 'UploadBtn';
|
||||
var deleteBtnClass = '.delete-' + fieldName + '-btn';
|
||||
|
||||
function init() {
|
||||
var files = $(id).val();
|
||||
var fileArray = files ? files.split(',') : [];
|
||||
|
||||
var html = '';
|
||||
if (fileArray.length > 0) {
|
||||
html += [
|
||||
'<div class="form-upload-file">',
|
||||
' <table class="layui-table" lay-size="sm">',
|
||||
' <colgroup>',
|
||||
' <col>',
|
||||
' <col width="60">',
|
||||
' </colgroup>',
|
||||
' <thead>',
|
||||
' <tr>',
|
||||
' <th>文件名</th>',
|
||||
' <th class="operation">操作</th>',
|
||||
' </tr>',
|
||||
' </thead>',
|
||||
' <tbody>',
|
||||
].join('');
|
||||
for (var i = 0, file; file = fileArray[i++];) {
|
||||
var idNameArray = file.split(':');
|
||||
var fileId = idNameArray[0];
|
||||
var fileName = idNameArray[1];
|
||||
html += [
|
||||
'<tr>',
|
||||
' <td><a href="route/file/download/false/' + fileId + '" target="_blank">' + fileName + '</a></td>',
|
||||
' <td class="operation">',
|
||||
' <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" data-id="' + fileId + '" data-name="' + fileName + '" data-field-name="' + fieldName + '">删除</button>',
|
||||
' </td>',
|
||||
'</tr>',
|
||||
].join('');
|
||||
}
|
||||
html += [
|
||||
' </tbody>',
|
||||
' </table>',
|
||||
'</div>'
|
||||
].join('');
|
||||
}
|
||||
|
||||
$(fileBoxId).empty();
|
||||
$(fileBoxId).append(html);
|
||||
|
||||
if (fileArray.length < maxCount) {
|
||||
$(uploadBtnId).removeClass('layui-btn-disabled');
|
||||
$(uploadBtnId).attr('disabled', false);
|
||||
} else {
|
||||
$(uploadBtnId).addClass('layui-btn-disabled');
|
||||
$(uploadBtnId).attr('disabled', true);
|
||||
}
|
||||
}
|
||||
|
||||
function addClick() {
|
||||
var layerLoadingIndex;
|
||||
var url = 'api/file/v2/upload-file';
|
||||
if (isApp) {
|
||||
url = 'app/file/v2/upload-file'
|
||||
}
|
||||
if (isAppRelease) {
|
||||
url = 'app/file/v2/upload-file-release'
|
||||
}
|
||||
upload.render({
|
||||
elem: uploadBtnId,
|
||||
url: url,
|
||||
accept: 'file',
|
||||
acceptMime: acceptMime,
|
||||
field: 'file',
|
||||
exts: allowExts,
|
||||
name: fieldName,
|
||||
before: function (obj) {
|
||||
layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3})
|
||||
},
|
||||
done: function (res, index, upload) {
|
||||
layer.close(layerLoadingIndex);
|
||||
var name = this.name;
|
||||
var files = $('#' + this.name).val();
|
||||
if (files.length > 0) {
|
||||
files += ',';
|
||||
}
|
||||
files += res.data.fileId + ':' + res.data.fileName.replace(/\,/g, ',');
|
||||
$('#' + name).val(files);
|
||||
init();
|
||||
},
|
||||
error: function (index, upload) {
|
||||
layer.close(layerLoadingIndex);
|
||||
layer.msg('文件上传失败');
|
||||
},
|
||||
progress: function (n, elem, res, index) {
|
||||
}
|
||||
});
|
||||
$(document).on('click', deleteBtnClass, function () {
|
||||
var id = this.dataset.id;
|
||||
var name = this.dataset.name;
|
||||
var fieldName = this.dataset.fieldName;
|
||||
var files = $('#' + fieldName).val().replace(id + ':' + name, '');
|
||||
files = files.replace(/\,+/g, ',');
|
||||
if (files.charAt(0) == ',') {
|
||||
files = files.substring(1);
|
||||
}
|
||||
if (files.charAt(files.length - 1) == ',') {
|
||||
files = files.substring(0, files.length - 1);
|
||||
}
|
||||
$('#' + fieldName).val(files);
|
||||
init();
|
||||
});
|
||||
}
|
||||
|
||||
init();
|
||||
if (!isShow) {
|
||||
addClick();
|
||||
} else {
|
||||
$(uploadBtnId).hide();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化视频上传
|
||||
* @param opt
|
||||
*/
|
||||
this.initUploadVideo = function (opt) {
|
||||
var maxCount = opt.maxCount ? parseInt(opt.maxCount) : 1
|
||||
maxCount = opt.maxCount < 0 ? 1 : opt.maxCount;
|
||||
var fieldName = opt.fieldName;
|
||||
var isShow = opt.isShow;
|
||||
|
||||
var defaultAllowExts = ['mp4'];
|
||||
var allowExts = opt.allowExts;
|
||||
allowExts = allowExts && (allowExts instanceof Array) ? defaultAllowExts.concat(allowExts).join('\\|') : defaultAllowExts.join('\\|');
|
||||
|
||||
var defaultAcceptMime = ['video/mp4'];
|
||||
var acceptMime = opt.acceptMime;
|
||||
acceptMime = acceptMime && (acceptMime instanceof Array) ? defaultAcceptMime.concat(acceptMime).join(',') : defaultAcceptMime.join(',');
|
||||
|
||||
var id = '#' + fieldName;
|
||||
var fileBoxId = id + 'FileBox';
|
||||
var uploadBtnId = id + 'UploadBtn';
|
||||
var deleteBtnClass = '.delete-' + fieldName + '-btn';
|
||||
|
||||
function init() {
|
||||
var files = $(id).val();
|
||||
var fileArray = files ? files.split(',') : [];
|
||||
var html = '';
|
||||
for (var i = 0, file; file = fileArray[i++];) {
|
||||
var idNameArray = file.split(':');
|
||||
var fileId = idNameArray[0];
|
||||
var fileName = idNameArray[1];
|
||||
html += [
|
||||
'<div class="form-upload-video">',
|
||||
' <video width="320" height="240" controls>',
|
||||
' <source src="route/file/download/true/' + fileId + '" type="video/mp4">',
|
||||
' 您的浏览器不支持 video 标签',
|
||||
' </video>',
|
||||
' <a class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" href="javascript:void(0);" data-id="' + fileId + '" data-name="' + fileName + '" data-field-name="' + fieldName + '">',
|
||||
' <i class="fa fa-trash-o"></i>',
|
||||
' </a>',
|
||||
'</div>',
|
||||
].join('');
|
||||
}
|
||||
|
||||
$(fileBoxId).empty();
|
||||
$(fileBoxId).append(html);
|
||||
|
||||
if (fileArray.length < maxCount) {
|
||||
$(uploadBtnId).removeClass('layui-btn-disabled');
|
||||
$(uploadBtnId).attr('disabled', false);
|
||||
} else {
|
||||
$(uploadBtnId).addClass('layui-btn-disabled');
|
||||
$(uploadBtnId).attr('disabled', true);
|
||||
}
|
||||
}
|
||||
|
||||
function addClick() {
|
||||
var layerLoadingIndex;
|
||||
upload.render({
|
||||
elem: uploadBtnId,
|
||||
url: 'api/file/v2/upload-video',
|
||||
accept: 'video',
|
||||
acceptMime: acceptMime,
|
||||
exts: allowExts,
|
||||
field: 'video',
|
||||
name: fieldName,
|
||||
before: function (obj) {
|
||||
layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3})
|
||||
},
|
||||
done: function (res, index, upload) {
|
||||
layer.close(layerLoadingIndex);
|
||||
var name = this.name;
|
||||
var files = $('#' + this.name).val();
|
||||
if (files.length > 0) {
|
||||
files += ',';
|
||||
}
|
||||
files += res.data.fileId + ':' + res.data.fileName.replace(/\,/g, ',');
|
||||
$('#' + name).val(files);
|
||||
init();
|
||||
},
|
||||
error: function (index, upload) {
|
||||
layer.close(layerLoadingIndex);
|
||||
layer.msg('文件上传失败');
|
||||
},
|
||||
progress: function (n, elem, res, index) {
|
||||
}
|
||||
});
|
||||
$(document).on('click', deleteBtnClass, function () {
|
||||
var name = this.dataset.name;
|
||||
var id = this.dataset.id;
|
||||
var fieldName = this.dataset.fieldName;
|
||||
var files = $('#' + fieldName).val().replace(id + ':' + name, '');
|
||||
files = files.replace(/\,+/g, ',');
|
||||
if (files.charAt(0) == ',') {
|
||||
files = files.substring(1);
|
||||
}
|
||||
if (files.charAt(files.length - 1) == ',') {
|
||||
files = files.substring(0, files.length - 1);
|
||||
}
|
||||
$('#' + fieldName).val(files);
|
||||
init();
|
||||
});
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
if (!isShow) {
|
||||
addClick();
|
||||
} else {
|
||||
$(uploadBtnId).hide();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传音频
|
||||
*/
|
||||
this.initUploadAudio = function (opt) {
|
||||
var maxCount = opt.maxCount ? parseInt(opt.maxCount) : 1
|
||||
maxCount = opt.maxCount < 0 ? 1 : opt.maxCount;
|
||||
var fieldName = opt.fieldName;
|
||||
var isShow = opt.isShow;
|
||||
|
||||
var defaultAllowExts = ['wav', 'mp3'];
|
||||
var allowExts = opt.allowExts;
|
||||
allowExts = allowExts && (allowExts instanceof Array) ? defaultAllowExts.concat(allowExts).join('\\|') : defaultAllowExts.join('\\|');
|
||||
|
||||
var defaultAcceptMime = ['audio/wav', 'audio/mp3'];
|
||||
var acceptMime = opt.acceptMime;
|
||||
acceptMime = acceptMime && (acceptMime instanceof Array) ? defaultAcceptMime.concat(acceptMime).join(',') : defaultAcceptMime.join(',');
|
||||
|
||||
var id = '#' + fieldName;
|
||||
var fileBoxId = id + 'FileBox';
|
||||
var uploadBtnId = id + 'UploadBtn';
|
||||
var deleteBtnClass = '.delete-' + fieldName + '-btn';
|
||||
|
||||
function init() {
|
||||
var files = $(id).val();
|
||||
var fileArray = files ? files.split(',') : [];
|
||||
var html = '';
|
||||
for (var i = 0, file; file = fileArray[i++];) {
|
||||
var idNameArray = file.split(':');
|
||||
var fileId = idNameArray[0];
|
||||
var fileName = idNameArray[1];
|
||||
html += [
|
||||
'<div class="form-upload-video">',
|
||||
' <audio src="route/file/download/true/' + fileId + '" controls>',
|
||||
' 您的浏览器不支持 audio 标签。',
|
||||
' </audio>',
|
||||
' <a class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" href="javascript:void(0);" data-id="' + fileId + '" data-name="' + fileName + '" data-field-name="' + fieldName + '">',
|
||||
' <i class="fa fa-trash-o"></i>',
|
||||
' </a>',
|
||||
'</div>',
|
||||
].join('');
|
||||
}
|
||||
|
||||
$(fileBoxId).empty();
|
||||
$(fileBoxId).append(html);
|
||||
|
||||
if (fileArray.length < maxCount) {
|
||||
$(uploadBtnId).removeClass('layui-btn-disabled');
|
||||
$(uploadBtnId).attr('disabled', false);
|
||||
} else {
|
||||
$(uploadBtnId).addClass('layui-btn-disabled');
|
||||
$(uploadBtnId).attr('disabled', true);
|
||||
}
|
||||
}
|
||||
|
||||
function addClick() {
|
||||
var layerLoadingIndex;
|
||||
var url = 'api/file/v2/upload-audio';
|
||||
if (isApp) {
|
||||
url = 'app/file/v2/upload-audio'
|
||||
}
|
||||
if (isAppRelease) {
|
||||
url = 'app/file/v2/upload-audio-release'
|
||||
}
|
||||
upload.render({
|
||||
elem: uploadBtnId,
|
||||
url: url,
|
||||
accept: 'audio',
|
||||
acceptMime: acceptMime,
|
||||
exts: allowExts,
|
||||
field: 'audio',
|
||||
name: fieldName,
|
||||
headers: headers,
|
||||
before: function (obj) {
|
||||
layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3})
|
||||
},
|
||||
done: function (res, index, upload) {
|
||||
layer.close(layerLoadingIndex);
|
||||
var name = this.name;
|
||||
var files = $('#' + this.name).val();
|
||||
if (files.length > 0) {
|
||||
files += ',';
|
||||
}
|
||||
files += res.data.fileId + ':' + res.data.fileName.replace(/\,/g, ',');
|
||||
$('#' + name).val(files);
|
||||
init();
|
||||
},
|
||||
error: function (index, upload) {
|
||||
layer.close(layerLoadingIndex);
|
||||
layer.msg('文件上传失败');
|
||||
},
|
||||
progress: function (n, elem, res, index) {
|
||||
}
|
||||
});
|
||||
$(document).on('click', deleteBtnClass, function () {
|
||||
var name = this.dataset.name;
|
||||
var id = this.dataset.id;
|
||||
var fieldName = this.dataset.fieldName;
|
||||
var files = $('#' + fieldName).val().replace(id + ':' + name, '');
|
||||
files = files.replace(/\,+/g, ',');
|
||||
if (files.charAt(0) == ',') {
|
||||
files = files.substring(1);
|
||||
}
|
||||
if (files.charAt(files.length - 1) == ',') {
|
||||
files = files.substring(0, files.length - 1);
|
||||
}
|
||||
$('#' + fieldName).val(files);
|
||||
init();
|
||||
});
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
if (!isShow) {
|
||||
addClick();
|
||||
} else {
|
||||
$(uploadBtnId).hide();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
@ -294,7 +294,7 @@ function FormUtil(layui, viewer) {
|
||||
'text/plain',
|
||||
'application/x-rar',
|
||||
'application/x-zip-compressed'
|
||||
].join(''),
|
||||
].join(','),
|
||||
field: 'file',
|
||||
exts: 'pdf|doc|docx|xls|xlsx|ppt|pptx|wps|txt|rar|zip',
|
||||
name: fieldName,
|
||||
|
Loading…
Reference in New Issue
Block a user