返回layui文件......登陆

layui文件上传

至诚网络2019-06-28 16:35:00220
<!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">&#xe615;</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">&#xe67c;</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>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网