<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>后台</title> <link rel="stylesheet" href="../../layui/css/layui.css"> <link rel="stylesheet" href="../../css/common.css"> <link rel="stylesheet" href="../../css/user/adminuser.css"> <link rel="stylesheet" href="../../css/iconfont.css"> <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <a class="layui-logo" href="index.html"> <img src="../../img/logo.png" alt=""> </a> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="javascript:;"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> zx66 </a> <dl class="layui-nav-child"> <dd> <a href="">基本资料</a> </dd> <dd> <a href="">安全设置</a> </dd> </dl> </li> <li class="layui-nav-item"> <a href="">退出登录</a> </li> </ul> </div> <div class="layui-side layui-side-menu"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="layadmin-system-side-menu"> <li class="layui-nav-item layui-nav-itemspec"> <a href="javascript:;"> <span class="item-title">收起左侧导航</span> <i class="layui-icon layui-icon-shrink-right"></i> </a> </li> <li class="layui-nav-item"> <a href="javascript:;" lay-tips="文章管理" lay-direction="2"> <span class="font-icon"> <i class="iconfont icon-wenzhang"></i> </span> <span class="item-title">文章管理</span> <span class="layui-nav-more"></span> </a> <dl class="layui-nav-child"> <dd> <a lay-href="article/free.html">免费文章</a> </dd> <dd> <a lay-href="javascript:;">收费文章</a> </dd> <dd> <a lay-href="javascript:;">保障文章</a> </dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;" lay-tips="权限管理" lay-direction="2"> <span class="font-icon"> <i class="iconfont icon-quanxian"></i> </span> <span class="item-title">权限管理</span> <span class="layui-nav-more"></span> </a> <dl class="layui-nav-child"> <dd> <a href="javascript:;">列表一</a> </dd> <dd> <a href="javascript:;">列表二</a> </dd> <dd> <a href="javascript:;">列表三</a> </dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;" lay-tips="审核管理" lay-direction="2"> <span class="font-icon"> <i class="iconfont icon-shenhe1"></i> </span> <span class="item-title">审核管理</span> <span class="layui-nav-more"></span> </a> <dl class="layui-nav-child"> <dd> <a href="javascript:;">列表一</a> </dd> <dd> <a href="javascript:;">列表二</a> </dd> <dd> <a href="javascript:;">列表三</a> </dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;" lay-tips="工单管理" lay-direction="2"> <span class="font-icon"> <i class="iconfont icon-gongdan"></i> </span> <span class="item-title">工单管理</span> <span class="layui-nav-more"></span> </a> <dl class="layui-nav-child"> <dd> <a href="javascript:;">列表一</a> </dd> <dd> <a href="javascript:;">列表二</a> </dd> <dd> <a href="javascript:;">列表三</a> </dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;" lay-tips="用户管理" lay-direction="2"> <span class="font-icon"> <i class="iconfont icon-yonghu-tianchong"></i> </span> <span class="item-title">用户管理</span> <span class="layui-nav-more"></span> </a> <dl class="layui-nav-child"> <dd> <a href="javascript:;">列表一</a> </dd> <dd> <a href="javascript:;">列表二</a> </dd> <dd> <a href="javascript:;">列表三</a> </dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;" lay-tips="商城管理" lay-direction="2"> <span class="font-icon"> <i class="iconfont icon-icon-test"></i> </span> <span class="item-title">商城管理</span> <span class="layui-nav-more"></span> </a> <dl class="layui-nav-child"> <dd> <a href="javascript:;">列表一</a> </dd> <dd> <a href="javascript:;">列表二</a> </dd> <dd> <a href="javascript:;">列表三</a> </dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;" lay-tips="操作员管理" lay-direction="2"> <span class="font-icon"> <i class="iconfont icon-caozuo"></i> </span> <span class="item-title">操作员管理</span> <span class="layui-nav-more"></span> </a> <dl class="layui-nav-child"> <dd> <a href="javascript:;">列表一</a> </dd> <dd> <a href="javascript:;">列表二</a> </dd> <dd> <a href="javascript:;">列表三</a> </dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;" lay-tips="日志管理" lay-direction="2"> <span class="font-icon"> <i class="iconfont icon-daily-fill"></i> </span> <span class="item-title">日志管理</span> <span class="layui-nav-more"></span> </a> <dl class="layui-nav-child"> <dd> <a href="javascript:;">列表一</a> </dd> <dd> <a href="javascript:;">列表二</a> </dd> <dd> <a href="javascript:;">列表三</a> </dd> </dl> </li> <span class="layui-nav-bar" style="top: 28px; height: 0px; opacity: 0;"></span> </ul> </div> </div> <div class="layui-body" id="LAY_app_body"> <div class="layadmin-tabsbody-item layui-show"> <div class="layui-card layadmin-header"> <div class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;"> <a lay-href="/">主页</a> <span lay-separator="">/</span> <a> <cite>图片列表</cite> </a> <span lay-separator="">/</span> <a href="javascript:history.back(-1)">返回</a> </div> <div class="main"> <div class="searchbox"> <button type="button" class="layui-btn layui-btn-sm" id="uploadbtn"><i class="layui-icon"></i>上传</button> </div> <table class="layui-hide" id="tables" lay-filter="tables"></table> <script type="text/html" id="bar"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> <div class="layui-row" id="popUpdateTest" style="display:none;"> <div class="layui-col-md10"> <form class="layui-form layui-from-pane" lay-filter="formData" style="margin-top:20px"> <div class="layui-form-item"> <label class="layui-form-label">图片标题</label> <div class="layui-input-block"> <input type="text" name="title" id="title" maxlength="32" required lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">图片地址</label> <div class="layui-input-block"> <span class="img-box" id="img-box"> <input type="hidden" name="id" id="dataid"> <input type="file" id="chooseImage" accept="image/gif,image/jpeg,image/jpg,image/png" name="file" onchange="filechange(event)" /> <img src="" id="oldhead" class="oldhead"> </span> </div> </div> <div class="layui-form-item" style="margin-top:40px"> <div class="layui-input-block"> <button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="btn">确认修改</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div> <script src="../../js/jquery.js"></script> <script src="../../js/common.js"></script> <script src="../../layui/layui.js"></script> <script type="text/javascript"> layui.use(['element'], function () { var element = layui.element; }); // 创建表格 layui.use(['table', 'form','laydate'], function () { var table = layui.table, form = layui.form, laydate = layui.laydate; laydate.render({ elem: '#createtime', value: new Date() }); table.render({ elem: '#tables', // url: '', //获取数据的接口 data: [ { id:1, title: '哈哈哈', imgpath: 'https://www.55128.cn/static/images/logo-1.png', seq:1, type:1, url: 'https://www.55128.cn/static/images/logo-1.png', createtime: '2020-04-20', remark:'今天天气不错' }, { id:2, title: '哈哈哈0', imgpath: 'https://www.55128.cn/static/images/logo-1.png', seq: 2, type:1, url: 'https://www.55128.cn/static/images/logo-1.png', createtime: '2020-04-20', remark:'今天天气不错' }, { id:3, title: '哈哈哈2', imgpath: 'https://www.55128.cn/static/images/logo-1.png', seq: 3, type:1, url: 'https://www.55128.cn/static/images/logo-1.png', createtime: '2020-04-20', remark:'今天天气不错' }, { id:4, title: '哈哈哈3', imgpath: 'https://www.55128.cn/static/images/logo-1.png', seq: 4, type:1, url: 'https://www.55128.cn/static/images/logo-1.png', createtime: '2020-04-20', remark:'今天天气不错' }, { id:5, title: '哈哈哈', imgpath: 'https://www.55128.cn/static/images/logo-1.png', seq: 2, type:2, url: 'https://www.55128.cn/static/images/logo-1.png', createtime: '2020-04-20', remark:'今天天气不错' }, { id:6, title: '哈哈哈0', imgpath: 'https://www.55128.cn/static/images/logo-1.png', seq: 1, type:2, url: 'https://www.55128.cn/static/images/logo-1.png', createtime: '2020-04-20', remark:'今天天气不错' }, { id:7, title: '哈哈哈2', imgpath: 'https://www.55128.cn/static/images/logo-1.png', seq: 4, type:2, url: 'https://www.55128.cn/static/images/logo-1.png', createtime: '2020-04-20', remark:'今天天气不错' }, { id:8, title: '哈哈哈3', imgpath: 'https://www.55128.cn/static/images/logo-1.png', seq: 5, type:1, url: 'https://www.55128.cn/static/images/logo-1.png', createtime: '2020-04-20', remark:'今天天气不错' }, ], title: '图片列表', cellMinWidth: 120, cols: [[ { title: 'ID',align: 'center',type:'numbers'}, { field: 'title', title: '标题'}, { field: 'url', title: '链接'}, { field: 'seq', title: '排序',sort: true}, { field: 'imgpath', title: '路径', templet: function (res) { return "<img class='headpic' src='" + res.url + "'>" } }, { field: 'type', title: '图片类型',templet: function (res) { var str = ''; switch (res['type']) { case 1: str = '轮播'; break; case 2: str = '横幅' break; } return str } }, { field: 'createtime', title: '上传时间',templet: function (res) { return formatDate(res.createtime) } }, { field: 'remark', title: '备注'}, { fixed: 'right', title: '操作', toolbar: '#bar' } ]], page: true, //分页 count: 4, limit: 2, id: 'searchReload', height:'full-175' }) //操作每一行的数据 table.on('tool(tables)', function (obj) { var data = obj.data; if (obj.event === 'del') { layer.confirm('真的删除行么', function (index) { $.ajax({ url:'', //删除的接口 type:'get', dataType: "json", data : "id="+data.id, success:function(res) { if(res.code == 0) { layer.msg("删除成功", {icon: 6}); }else{ layer.msg("删除失败", {icon: 5}); } layer.close(index); } }) }); } else if (obj.event === 'edit') { layer.open({ type: 1, title: "图片上传", area: ['420px', '350px'], shade: 0, content: $("#popUpdateTest"), success: function (layero, index) { form.val('formData', data) $("#oldhead").attr('src', data.url) }, cancel: function(){ //点击取消 $("#popUpdateTest").hide() layer.closeAll() } }); setFormValue(obj, data); } }); $("#uploadbtn").on("click",function() { layer.open({ type: 1, title: "图片上传", area: ['420px', '350px'], shade: 0, content: $("#popUpdateTest"), success: function (layero, index) { $("#title").val('') $("#oldhead").attr('src', '../../img/upload.png') }, cancel: function(){ $("#popUpdateTest").hide() layer.closeAll() } }); setFormValue('',''); }) // 提交修改的数据 function setFormValue(obj, data) { form.on('submit(btn)', function(msg) { if(msg.field.title.length > 32 || msg.field.title.length < 2) { layer.tips('图片标题请输入2-32字之间',$("#title"),{ tips: [3, '#0FA6D8'] }); return false; } var base = $("#oldhead").attr("src") base64Upload(msg.field.title?msg.field.title:'',base); }) } }) $("#oldhead").click(function () { $("#chooseImage").click(); }) function filechange(obj) { var files = obj.target.files, file; var file = files[0] if (!/image\/\w+/.test(file.type)) { layer.msg("请确保文件为图片类型", {icon: 5}); return false; } var maxSize = 2; var filesize = file.size; if (filesize/(1024 * 1024) > maxSize) { layer.msg('上传图片不能大于'+maxSize+'M', {icon: 5}); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { dealImage(this.result, { width: 200 }, function (base) { $("#oldhead").attr("src",base); }); } } //上传base64图片 function base64Upload(obj,img) { var formData = new FormData(); formData.append('base64string',img); if(obj && $("#dataid").val()) { //判断是新增还是修改 formData.append('id',$("#dataid").val()); } if(obj) { //修改标题 formData.append('title',obj); } $.ajax({ type:'post', url: '', //接受图片的地址 data: formData, processData: false, cache: false, contentType: false, success:function(res){ var res = JSON.parse(res); if (res.code == 0) { layer.msg("上传成功", {icon: 6}); } else { layer.msg('上传失败',{time: 1500}); } }, error:function(error){ console.log(error); layer.msg('上传失败',{time: 1500}); } }) } </script> </body> </html>