新贴合layui设计理念,而对上一次帖子代码的更新,并且加入动态表格数据回退功能

分享 未结 2 819
墨诩
墨诩 2019-10-23
悬赏:20飞吻
首先接上文 地址 https://fly.layui.com/jie/47485/

展示效果如下


该项目实例文件的上传 是在thinkphp5.1下执行的

帖代码核心文件

layui.config({
base: '/static/index/layui/' //静态资源所在路径
}).extend({
index: 'lib/index', //主入口模块
jquery_cookie: 'cookie'
}).use(['index','form', 'layedit', 'laydate', 'upload' ,'table','colorpicker','jquery_cookie'], function(){
var i = layui.$,
form = layui.form,
layedit = layui.layedit,
laydate = layui.laydate,
upload = layui.upload,
table = layui.table,
colorpicker = layui.colorpicker,
cookie = layui.jquery_cookie(i),
AuthList = i.parseJSON(i.cookie('AuthList'));

//TAG标签
lay('.test-tag').each(function(){
var html = '',
livalue = 1,
name = i(this).attr('name'),
inputvar= i(this).val();
if(inputvar){
i.each(inputvar.split('、'),function(key,value){
html += '<li onclick="stop(this)">'+
'<div class="tag-input" contenteditable tabindex onblur="tagBlur(this,\''+name+'\');" onkeydown="tagEnter(this,\''+name+'\')" style="display:none">'+
'</div>'+
'<div class="tag-spure" onclick="tagClick(this,\''+name+'\')">'+value+'</div>'+
'<div class="tag-delete" onclick="tagDelete(this,\''+name+'\')">x</div>'+
'</li>';
})
i(this).parent().append('<ul class="tag-layui clearfix">'+html+'</ul>');
}else{
i(this).parent().append('<ul class="tag-layui clearfix"></ul>');
}

i(".tag-layui").on("click",function(){
if(i(this).children("li").length!=0){
var livalue = i(this).children("li").last().children('.tag-spure').text();
}
if(livalue==""){
tagClick(i(this).children("li").last().children('.tag-spure'));
}else{
var html = "";
html += '<li onclick="stop(this)">'+
'<div class="tag-input" contenteditable tabindex onblur="tagBlur(this,\''+name+'\')"; onkeydown="tagEnter(this,\''+name+'\')"></div>'+
'<div class="tag-spure" style="display:none" onclick="tagClick(this,\''+name+'\')"></div>'+
'<div class="tag-delete" style="display:none" onclick="tagDelete(this,\''+name+'\')">x</div>'+
'</li>'
i(this).append(html);
i(this).children("li").last().children('.tag-input').focus();
}
})
});

//日期时间
lay('.layui-date').each(function(){
var data = i(this).attr("layui-date-type");
data = JSON.parse(data);
laydate.render({
elem : this,
range : data.range,
type : data.type
});
});

//颜色选择器
lay('.layui-color').each(function(){
// console.log(colorpicker);
var name = i(this).attr('name');
var that = i(this).parent().siblings(".layui-color-div").find(".layui-color-row");
var value = i(this).val();
if(value==""){
value = "rgba(7, 155, 140, 1)";
}

colorpicker.render({
elem: that,
color: value,
format: 'rgb',
predefine: true,
alpha: true,
done: function(color){
color || this.change(color); //清空时执行 change
i('input[name="'+name+'"]').val(color);
}
});
});

//单图上传
lay('.upload_img').each(function(){
var name = i(this).attr('name'),
width = i(this).attr('width'),
height = i(this).attr('height'),
img_arr = new Object();
if(width){ img_arr.width = width;}
if(height){ img_arr.height = height;}
upload.render({
elem : this,
url : layui.setter.upload_img,
data : img_arr,
done: function(data){
//如果上传失败
if(data.code == 1){
var strs = data.info.split("|"),
field = this,
html = "";
html += '<div class="layui-col-md2 layui-col-xs8">'+
'<div class="layui-image-single" layui-images-val="'+strs[1]+'|'+strs[2]+'">'+
'<div class="layui-pic-box">'+
'<img src="'+strs[1]+'" class="layui-pic"/>'+
'</div>'+
'<div class="layui-input-box">'+
'<input type="text" class="layui-input-image" value='+strs[0]+' onblur="setBlurInput(\''+name+'\')"/>'+
'</div>'+
'<div>'+
'<a class="layui-image-delete" onclick="removePicture(this,\''+name+'\')">'+
'<i class="layui-icon"></i>'+
'</a>'+
'</div>'+
'</div>'+
'</div>';
i('input[name="'+name+'"]').val(data.info);

this.item.siblings(".layui-upload-list").html(html);
}else{
return layer.msg(data.msg);
}

},
error: function(){
return;
//演示失败状态,并实现重传
var demoText = i('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
})
})

//多图上传
lay('.upload_imgs').each(function(){
var name = i(this).attr('name'),
width = i(this).attr('width'),
height = i(this).attr('height'),
img_arr = new Object();
if(width){ img_arr.width = width;}
if(height){ img_arr.height = height;}

upload.render({
elem : this,
url : layui.setter.upload_img,
data : img_arr,
multiple: true,
done: function(data){
if(data.code == 1){
var strs = data.info.split("|");
var field = this;
var html = "";
html += '<div class="layui-col-md2 layui-col-xs6" style="margin-bottom: 5px;">'+
'<div class="layui-image-single" layui-images-val="'+strs[1]+'|'+strs[2]+'">'+
'<div class="layui-pic-box">'+
'<img src="'+strs[1]+'" class="layui-pic"/>'+
'</div>'+
'<div class="layui-input-box">'+
'<input type="text" class="layui-input-image" value='+strs[0]+' onblur="setBlurInput(\''+name+'\')"/>'+
'</div>'+
'<div class="layui-status">'+
'<a class="layui-images-left" onclick="pic_movepicurls(this,0,\''+name+'\')" >'+
'<i class="layui-icon"></i>'+
'</a>'+
'<a class="layui-delete" onclick="removePicture(this,\''+name+'\')">'+
'<i class="layui-icon"></i>'+
'</a>'+
'<a class="layui-images-right" onclick="pic_movepicurls(this,1,\''+name+'\')" >'+
'<i class="layui-icon"></i>'+
'</a>'+
'</div>'+
'</div>'+
'</div>';

//$("input[name="+name+"]").attr('value',data.data);
this.item.siblings(".layui-upload-list").append(html);
setPictureIds(name);
}else{
return layer.msg(data.msg);
}
},
error: function(){

}
})
})

//提交
lay(".ajax-post").each(function(){

form.on('submit(layuiadmin-app-form-submit)', function(data){

var field = data.field; //获取提交的字段
var table = i(data.elem).attr('lay-table');
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

i.ajax({
url: data.form.action,
type: 'post',
dataType: 'json',
data: field,
success: function(data){
if(data.code==1){
layer.msg(data.msg,{icon: 1,time:1000},function(){
if(index){
//重载表格
if(table){
parent.layui.table.reload(table);
}
parent.layer.close(index); //再执行关闭
}else{
window.location.href = data.url;
}
});
}else{
layer.msg(data.msg,{icon: 2,time:1000})
}
},
error: function(){
layer.msg('网络错误');
},
})
});
})

lay(".layui-auth-root").each(function(){
var that = i(this);
var data = that.attr("lay-href") || that.attr("href") || null;
var initial = 0;
if(AuthList==true){
return;
}
i.each(AuthList,function(index,value){
if(data.indexOf(value) > 0 ){
initial++
}
})
if(initial<1){
that.remove();
}
})
})
接上

/***tag标签功能类***/
//阻止冒泡事件
function stop(e){
event.stopPropagation();
}

//tag标签失去焦点事件
function tagBlur(e,name){
var value = layui.$(e).text();
layui.$(e).hide();
layui.$(e).siblings().show();
layui.$('input[name="'+name+'"]').siblings('ul').find('li').find('.tag-spure').each(function(index,text){
if(layui.$(this).text()==value){
tagDelete(e,name);
};
})
layui.$(e).siblings('.tag-spure').text(value);
if(value==""){
layui.$(e).parent().remove();
}
setTagInput(name);
}

//tag文本框回车事件
function tagEnter(e,name) {
var html = "";
event=document.all?window.event:event;
if((event.keyCode || event.which)==13){
var value = layui.$(e).text();
layui.$(e).hide();
layui.$(e).siblings().show();
if(layui.$(this).text()!=value){
html += '<li onclick="stop(this)">'+
'<div class="tag-input" contenteditable tabindex onblur="tagBlur(this,\''+name+'\')"; onkeydown="tagEnter(this,\''+name+'\')"></div>'+
'<div class="tag-spure" onclick="tagClick(this,\''+name+'\')" style="display:none"></div>'+
'<div class="tag-delete" style="display:none" onclick="tagDelete(this,\''+name+'\')">x</div>'+
'</li>'
layui.$(e).parents(".tag-layui").append(html);
layui.$(e).parents(".tag-layui").children("li").last().children('.tag-input').focus();
}
}
}

//tag标签点击事件
function tagClick(e,name){
var value = layui.$(e).text();
layui.$(e).hide();
layui.$(e).siblings('.tag-delete').hide();
layui.$(e).siblings('.tag-input').show().text(value).focus();
}

//tag文本框输入事件
function setTagInput(name){
var ids = [];
layui.$('input[name="'+name+'"]').siblings('ul').find('li').find('.tag-spure').each(function(index,text){
ids.push(layui.$(this).text());
})

if(ids.length > 0){
layui.$('input[name="'+name+'"]').val(ids.join('、'));
}else{
layui.$('input[name="'+name+'"]').val('');
}
}

//tag标签删除事件
function tagDelete(e,name){
layui.$(e).parent("li").remove();
setTagInput(name)
};

/***图片上传功能类***/
//图片左右移动
function pic_movepicurls(obj,mark,name){
var that = layui.$(obj).parent().parent().parent();
var allow = '';
if (mark==1){
allow = that.next()
}else{
allow = that.prev()
}
if( allow.length > 0 ) {
if(mark==0) allow.before(that.clone())
if(mark==1) allow.after(that.clone())
that.remove()
setPictureIds(name);
}
}

//图片失去焦点
function setBlurInput(name){
setPictureIds(name);
}

//图片删除按钮
function removePicture(o,name){
layui.$(o).parents('.layui-image-single').parent().remove();
setPictureIds(name);
}

//图片生成值传入
function setPictureIds(name){
var ids = [];
layui.$('input[name="'+name+'"]').parent().find('.layui-upload-list').find('.layui-image-single').each(function(){
ids.push(layui.$(this).find('.layui-input-image').val()+'|'+layui.$(this).attr('layui-images-val'));
});
if(ids.length > 0){
layui.$('input[name="'+name+'"]').val(ids.join('||'));
}else{
layui.$('input[name="'+name+'"]').val('');
}
}
后台代码

public function image(){
// 获取表单上传文件 例如上传了001.jpg
$file = request()->file('file');
$width = request()->post('width');
$height = request()->post('height');

// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->validate(
array(
'size' =>self::$_images['maxSize'],
'ext' =>self::$_images['exts'],
)
)->move('./'.self::$_images['rootPath']);

if($info){
//记录部分上传文件信息
$up_name = $info->getFilename(); //文件名
$up_sha1 = $info->hash('sha1'); //文件sha1
$up_md5 = $info->hash('md5'); //文件md5

//拼接上传的文件名
$ImageName = self::$_images['rootPath']. '/' .$info->getSaveName();

//清空变量
unset($info);
//检测木马文件
if(!$this->checkTrojan($ImageName)){
unlink('./'.$ImageName);
$this->error("疑似木马文件");
}

//打开图片
$image = Image::open('./'.$ImageName);

//检测图片宽度
if(!empty($width) && $width!=$image->width()){
unlink('./'.$ImageName);
$this->error("图片宽度限制为".$width.'px');
}
//检测图片高度
if(!empty($height) && $height!=$image->height()){
unlink('./'.$ImageName);
$this->error("图片宽度限制为".$width.'px');
}
//释放变量变量为打开图片
unset($image);

//检测图片是否重复上传
$find = Db('upload')->where(array('sha1'=>$up_sha1,'md5'=>$up_md5))->find();

//如果图片存在则删除临时文件
if($find){
//缺少删除临时文件
unlink('./'.$ImageName);
if(empty($find['thumbnail'])){
//获取是否生成缩略图
$is_thumb = 1;
if($is_thumb){
//打开图片
$image = Image::open('./'.$find['image']);
//生成缩略图
$image->thumb(150,150,Image::THUMB_SCALING);
//缩略图地址名称
$ThumbNameEdit = str_replace('.','_s.',basename($find['image']));
//缩略图保存地址
$image->save('./'.dirname($find['image']).'/'.$ThumbNameEdit);
//返回图片缩略图
$PathThumbNameEdit = dirname($find['image']).'/'.$ThumbNameEdit;
//更新
Db('upload')->where(array('id'=>$find['id']))->setField('thumbnail',$PathThumbNameEdit);
//释放变量变量为打开图片
unset($image);
}
}
//返回值
$data['info'] = $up_name.'|'.$find['image'].'|'.$find['thumbnail'];
$data['code'] = 1;
$data['msg'] = '上传成功!';
return json($data);
}
//获取是否生成缩略图
$is_thumb = 1;
if($is_thumb){
//缩略图名称
$ThumbName = str_replace('.','_s.',basename($ImageName));

//打开图片
$image = Image::open('./'.$ImageName);

//生成缩略图
$image->thumb(60,60,Image::THUMB_SCALING);
//缩略图保存地址
$image->save('./'.dirname($ImageName).'/'.$ThumbName);
//返回图片缩略图
$submit['thumbnail'] = dirname($ImageName).'/'.$ThumbName;
//释放变量变量为打开图片
unset($image);
}

//获取是否添加水印
$is_print = 1;
if($is_print){
//打开图片
$image = Image::open('./'.$ImageName);
switch ($is_print) {
//图片水印
case 1:
$image->water('./t0170fc5289e0ca08b2.png',Image::WATER_SOUTHEAST,80);
$image->save('./'.$ImageName);
//释放变量变量为打开图片
unset($image);
break;
//文字水印
case 2:
$image->text('十年磨一剑 - 为API开发设计的高性能框架',VENDOR_PATH.'topthink/think-captcha/assets/ttfs/1.ttf',20,'#ffffff');
$image->save('./'.$ImageName);
//释放变量变量为打开图片
unset($image);
break;
default:
break;
}
}

//数据库记录内容
$submit['sha1'] = $up_sha1;
$submit['md5'] = $up_md5;
$submit['ip'] = get_client_ip();
$submit['image'] = $ImageName;
$submit['create_time'] = time();
Db('upload')->insert($submit);

//返回值
$data['info'] = $up_name.'|'.$submit['image'].'|'.$submit['thumbnail'];
$data['code'] = 1;
$data['msg'] = '上传成功!';

return json($data);

}else{
// 上传失败获取错误信息
$this->error($file->getError());
}
}
这是图片木马检测 从网上摘的后自己改了改亲测可用
/**
* 检测木马
* @param [type] $path [文件地址]
* @return [type] [description]
*/
private static function checkTrojan($path) {
$resource = fopen($path, 'rb');
$fileSize = filesize($path);
// fseek($resource, 0);   //把文件指针移到文件的开头
fseek($resource,0);
if ($fileSize > 512) { // 若文件大于521B文件取头和尾
$hexCode = bin2hex(fread($resource, 512));
//fseek($resource, $fileSize - 512); //把文件指针移到文件尾部
fseek($resource,$fileSize - 512);
$hexCode .= bin2hex(fread($resource, 512));
} else { // 取全部
$hexCode = bin2hex(fread($resource, $fileSize));
};
fclose($resource);
if (preg_match("/(3c25.*?28.*?29.*?253e)|(3c3f.*?28.*?29.*?3f3e)|(3C534352495054)|(2F5343524950543E)|(3C736372697074)|(2F7363726970743E)/is", $hexCode)){
return false;
}else{
return true;
}
}
样式如下
/*TAG文本框*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1}
.tag-layui{ width:100%; border:1px solid #e6e6e6;min-height: 38px;display: flow-root;}
.tag-li-layui{background: red; }
.tag-input{border:1px solid #dedede; min-width:30px; height:22px; line-height: 22px; padding:0px 8px;}
.tag-input div{float: left;}
.tag-layui li{ position: relative; float:left; height:23px; line-height: 30px; margin: 5px;}
.tag-layui li .tag-spure{ padding:0px 20px 0px 5px; background: #e0eaf1; line-height: 23px; border:1px solid transparent; color:#46799b; }
.tag-layui li .tag-delete{position: absolute; right: 5px;width: 10px; height: 10px; top: 6px; line-height: 10px; text-align: center }

/*单图上传样式*/
.layui-image-single{ height:180px; border: 1px solid #9E9E9E; padding:5px; width:85%; margin:0 auto; }
.layui-pic-box{width:100%; height:115px; border:1px solid #e1e1e1;}
.layui-pic{width:99.5%; height:120px;}
.layui-input-image{ width:97.5%;height:20px; margin-top:7px;border: 1px solid #dadada; }
.layui-image-delete{ width:100%; display:block; height:30px; line-height:30px; background-color:#FF5722; text-align:center;color:#fff; margin-top:5px; }
/*多图上传*/
.layui-images-float{ float:left; margin:3px;}
.layui-status{ width:100%; background-color:#FF5722; margin-top:5px;}
.layui-status a{ display: inline-block; width:33.333%; color:#fff; text-align: center; height:30px; line-height: 30px}
.layui-images-left,.layui-images-right{ background:#009688; }
外加图片上传表用于做图片重复上传的验证


以上后台代码中代入了上传图片的宽度高度的限制


以上为上次帖子的更新
以下为table数据表格中的回退按钮

先上图

功能为 数据表格点入数据后和浏览器一样 有返回上一页功能 ps:我是直接添加至源码内进行改变

贴图片






以上为新加的小细节功能

具体附赠代码分享文件
链接: https://pan.baidu.com/s/1Pr9fbf3kdCYj2oXTErq6Ag 提取码: xkhv 复制这段内容后打开百度网盘手机App,操作更方便哦
回帖
  • 墨诩
    2019-10-23
    此类代码只为实现功能性~~书写效果 另说 望大家海涵,另外 个人分享不喜勿喷。
    0 回复
  • 渔Ocean
    2019-10-23
    好的[可爱]
    0 回复