!21 上传单张图片增加预览功能

Merge pull request !21 from Gamit/v6
This commit is contained in:
Anyon 2022-02-10 08:48:29 +00:00 committed by Gitee
commit f5e6d1d012
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
2 changed files with 17 additions and 7 deletions

View File

@ -573,9 +573,13 @@ $(function () {
$.fn.uploadOneImage = function () {
return this.each(function () {
if ($(this).data('inited')) return true; else $(this).data('inited', true);
var $in = $(this), $bt = $('<a data-file class="uploadimage transition"><span class="layui-icon">&#x1006;</span></a>').data('input', this);
$bt.attr('data-size', $in.data('size') || 0).attr('data-type', $in.data('type') || 'png,jpg,gif').find('span').on('click', function (event) {
event.stopPropagation(), $bt.attr('style', ''), $in.val('');
var $in = $(this), $bt = $('<a data-file class="uploadimage transition"><span class="layui-icon">&#x1006;</span><span class="layui-icon">&#xe615;</span></a>').data('input', this);
$bt.attr('data-size', $in.data('size') || 0).attr('data-type', $in.data('type') || 'png,jpg,gif').find('span').on('click', function (event, index) {
index = $(this).index();
event.stopPropagation();
if (index === 0) $bt.attr('style', ''), $in.val('');
else if($in.val()) $.previewImage(encodeURI($in.val()));
}), $in.on('change', function () {
if (this.value) $bt.css('backgroundImage', 'url(' + encodeURI(this.value) + ')');
}).after($bt).trigger('change');

View File

@ -4,7 +4,7 @@
// +----------------------------------------------------------------------
// | ThinkAdmin
// +----------------------------------------------------------------------
// | 版权所有 2014~2022 广州楚才信息科技有限公司 [ http://www.cuci.cc ]
// | 版权所有 2014~2021 广州楚才信息科技有限公司 [ http://www.cuci.cc ]
// +----------------------------------------------------------------------
// | 官方网站: http://demo.thinkadmin.top
// +----------------------------------------------------------------------
@ -628,9 +628,7 @@
box-shadow: @ShadowMinOuter;
background: url('../img/upimg.png') no-repeat center center;
background-size: cover;
span.layui-icon {
right: 0;
span.layui-icon{
color: #fff;
width: 20px;
height: 20px;
@ -640,6 +638,14 @@
line-height: 22px;
background: rgba(0, 0, 0, .5)
}
span.layui-icon:first-child {
left: 0;
}
span.layui-icon:last-child {
right: 0;
}
&:hover span.layui-icon {
display: inline-block;