摘要：<!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>狀態(tài)</th>
<th>添加時間</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>14</td>
<td>iphone</td>
<td>Apple iPhone 8 Plus 64GB 紅色特別版 移動聯(lián)通電信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 紅色特別版 移動聯(lián)通電信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 紅色特別版 移動聯(lián)通電信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;
//執(zhí)行一個laypage實例
laypage.render({
elem: 'test1' //注意，這里的 test1 是 ID，不用加 # 號
,count: 50 //數(shù)據(jù)總數(shù)，從服務(wù)端得到
});
});
function del(){
layer.confirm('確定要刪除么？', {
icon:2,
btn: ['確定', '取消'] //可以無限個按鈕
}, function(index, layero){
//按鈕【按鈕一】的回調(diào)
}, function(index){
//按鈕【按鈕二】的回調(diào)
});
}
// 添加
//預(yù)覽圖片
//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 };
}
//顯示隱藏預(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') 獲取到當(dāng)前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;
//執(zhí)行實例
var uploadInst = upload.render({
elem: '#test1' //綁定元素
,url: '/upload/' //上傳接口
,done: function(res){
//上傳完畢回調(diào)
}
,error: function(){
//請求異常回調(diào)
}
});
});
</script>
</body>
</html>
批改老師：天蓬老師批改時間：2019-06-29 13:24:16
老師總結(jié)：文件上傳, 是需要綁定一個處理接口的, 這個處理接口可以用php, 或者其它應(yīng)用來實現(xiàn)