abstract:<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css"&
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="static/layui/css/layui.css"> <script type="text/javascript" src="static/layui/layui.js"></script> <style type="text/css"> .header span{background: #009688;margin-left: 30px;padding: 10px;color:#ffffff;} .header button{float: right;margin-top: -5px;} .thumb{height: 28px;float: right;border: 1px solid #f0f0f0;padding: 1px;} </style> </head> <body style="padding: 10px;"> <div class="header"> <span>商品列表</span> <button class="layui-btn layui-btn-sm" onclick="add()">添加</button> </div> <div class="layui-form-item"> <div class="layui-input-inline"> <input type="text" name="title" required lay-verify="required" placeholder="请输入商品名称" class="layui-input"> </div> <button class="layui-btn layui-btn-primary"><i class="layui-icon"></i> 搜索</button> </div> <table class="layui-table"> <thead> <tr> <th>ID</th> <th>分类</th> <th>名称</th> <th>最低价格</th> <th>成本</th> <th>PV</th> <th>状态</th> <th>添加时间</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>14</td> <td>iphone</td> <td>Apple iPhone 8 Plus 64GB 红色特别版 移动联通电信4G手机<img class="thumb" src="../uploads/20180524\13b7cee33f10bcdaeeb273f31e2600f5.jpg" onmouseover="show_img(this)" onmouseleave="hide_img()"> </td><!-- --> <td>5000.00</td> <td>3000.00</td> <td>3</td> <td>正常</td> <td>2018-05-24 14:31:04</td> <td> <button class="layui-btn layui-btn-xs" onclick="add()">编辑</button> <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button> </td> </tr> <tr> <td>14</td> <td>iphone</td> <td>Apple iPhone 8 Plus 64GB 红色特别版 移动联通电信4G手机<img src="../uploads/20180524\13b7cee33f10bcdaeeb273f31e2600f5.jpg " class="thumb" onmouseover="show_img(this)" onmouseleave="hide_img()"> </td><!-- --> <td>5000.00</td> <td>3000.00</td> <td>3</td> <td>正常</td> <td>2018-05-24 14:31:04</td> <td> <button class="layui-btn layui-btn-xs" onclick="add()">编辑</button> <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button> </td> </tr> <tr> <td>14</td> <td>iphone</td> <td>Apple iPhone 8 Plus 64GB 红色特别版 移动联通电信4G手机<img src="../uploads/20180524\13b7cee33f10bcdaeeb273f31e2600f5.jpg " class="thumb" onmouseover="show_img(this)" onmouseleave="hide_img()"> </td><!-- --> <td>5000.00</td> <td>3000.00</td> <td>3</td> <td>正常</td> <td>2018-05-24 14:31:04</td> <td> <button class="layui-btn layui-btn-xs" onclick="add()">编辑</button> <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button> </td> </tr> </tbody> </table> <div id="test1"></div> <script type="text/javascript"> layui.use(['layer','laypage'],function(){ layer = layui.layer; laypage= layui.laypage; $ = layui.jquery; //执行一个laypage实例 laypage.render({ elem: 'test1' //注意,这里的 test1 是 ID,不用加 # 号 ,count: 50 //数据总数,从服务端得到 }); }); function del(){ layer.confirm('确定要删除么?', { icon:2, btn: ['确定', '取消'] //可以无限个按钮 }, function(index, layero){ //按钮【按钮一】的回调 }, function(index){ //按钮【按钮二】的回调 }); } // 添加 //预览图片 //1、首先获取到浏览器窗口的位置(相对于文档) function getMousePos(event) { var e = event || window.event; // var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; //获取页面滚动的位移 var scrollY = document.documentElement.scrollTop || document.body.scrollTop; var x = e.pageX || e.clientX + scrollX; var y = e.pageY || e.clientY + scrollY; return { 'x': x, 'y': y }; } //显示隐藏预览图片 function show_img(obj){ var imgurl = $(obj).attr('src') var res=getMousePos() var html ='<div style="background:#fff;width: 200px;border:solid 1px #ccc;border-radius: 6px;padding: 2px;position: absolute;left:'+res.x+'px;top:'+res.y+'px;z-index:4" id="preview">\ <img style="width: 100%;border-radius: 6px;" src="'+imgurl+'">\ </div> ' $('body').append(html) } function hide_img(){ $('#preview').remove() //$('#preview') 获取到当前id } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="static/plugins/layui/css/layui.css"> <script type="text/javascript" src="static/plugins/layui/layui.js"></script> </head> <body> <button type="button" class="layui-btn" id="test1"> <i class="layui-icon"></i>上传图片 </button> <script> layui.use('upload', function(){ var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#test1' //绑定元素 ,url: '/upload/' //上传接口 ,done: function(res){ //上传完毕回调 } ,error: function(){ //请求异常回调 } }); }); </script> </body> </html>
Correcting teacher:天蓬老师Correction time:2019-06-29 13:24:16
Teacher's summary:文件上传, 是需要绑定一个处理接口的, 这个处理接口可以用php, 或者其它应用来实现