
<!-- 
	data-bindelem:
		绑定元素
		
	data-filepaths：
		回显数据图片路径	
		
	data-type:
		1:图片上传
		2:文件上传
		
	data-maxnum：
		可最大上传的数量	
		
		

 -->

<link href="https://www.layuicdn.com/layui-v2.5.2/css/layui.css" rel="stylesheet"/>
<script src="https://www.layuicdn.com/layui-v2.5.2/layui.js"></script>
<style>
	.pluguploadimgcss{
		padding: 9px;
    	border: 1px solid #e3e3e3;
    	border-bottom-color: #e0e0e0;
    	border-right-color: #ececec;
    	float: left;
    	margin-right: 3px;
    	overflow: hidden;
	}
	.g_icon{
		position: relative;
	    width: 15px;
	    height: 15px;
	    font-size: 12px;
	    background-color: #ccc;
	    padding: 3px;
	    left: 90px;
    	top: -6px;
	}
	
	.pluguploadimgcss img{
		cursor: pointer;
	}

</style>

<div id="pluguploaddiv1" style="display: none">
	<span class="layui-upload" >
	  <button type="button" class="layui-btn " id="pluguploadbutton1"><i class="layui-icon">&#xe60d;</i>上传图片 <i style="margin-left: 10px;display: none" class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i></button>
	  </span>
	 <span class="layui-upload-list" id="pluguploadimg1"></span>
</div>

<div id="pluguploaddiv2" style="display: none">
	<button type="button" class="layui-btn layui-btn-danger" id="pluguploadbutton2"><i class="layui-icon">&#xe67c;</i>上传文件 <i style="margin-left: 10px;display: none" class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i></button>
	<div class="layui-inline layui-word-aux" id="pluguploadtext2"></div>
</div>


<script>
var sysUrl="[[${sysUrl}]]";
var imgUrl="[[${imgUrl}]]";
var type=$("#pluguploadid").data("type");
var width=$("#pluguploadid").data("imgwidth");
var height=$("#pluguploadid").data("imgheight");
var maxnum=$("#pluguploadid").data("maxnum");
var bindelem=$("#pluguploadid").data("bindelem");
var filePaths=$("#pluguploadid").data("filepaths");

if(type==undefined || type=='undefined' || type==null || type==''){
	type=1;
}
if(maxnum==undefined || maxnum=='undefined' || maxnum==null || maxnum==''){
	maxnum=10;
}
if(bindelem==undefined || bindelem=='undefined' || bindelem==null || bindelem==''){
	bindelem=null;
}
if(filePaths==undefined || filePaths=='undefined' || filePaths==null || filePaths==''){
	filePaths=null;
}

layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  
  if(bindelem!=null && filePaths!=null){
		$(bindelem).val(filePaths);
		var fps=filePaths.split(";");
		for (var i = 0; i < fps.length; i++) {
		 $('#pluguploadimg'+type).append('<span class="pluguploadimgcss"  style="width: 100px;height:100px"><i onclick="deletepulgimg(this,\''+fps[i]+'\')" class="layui-icon layui-icon-close g_icon"></i><img onclick="openpulgimg(this)" src="'+ imgUrl+fps[i] +'"  style="width:100%"  class="layui-upload-img "></span>') 
		}
	}
	$("#pluguploaddiv"+type).show();
  
  //普通图片上传
  var uploadInst = upload.render({
    elem: '#pluguploadbutton1'
    ,url: '[[${sysUrl}]]/file/uploads'
    ,before: function(obj){
      $(".layui-icon-loading").show();
      obj.preview(function(index, file, result){//预读本地文件示例，不支持ie8
    	
      });
    },done: function(res){
      $(".layui-icon-loading").hide();
      if($(bindelem).val().split(";").length>=maxnum){
		  return layer.msg('上传文件已超过最大值');
	  }
      if(res.code == '000'){
    	  return layer.msg('上传失败,刷新后重试！');
      }
      layer.msg('上传成功');
      if(res != null && res != ""){
		 var obj = res;
		 var filePath = obj.data.pics[0].filePath;
		 var fileCode = obj.data.pics[0].fileCode;
		 var fileExt = obj.data.pics[0].fileExts;
		 var id = obj.data.pics[0].id;
		 var name = obj.data.pics[0].name;
		 var fileWidth = obj.data.pics[0].fileWidth;
		 var fileHeight = obj.data.pics[0].fileHeight;
		 var fileName = obj.data.pics[0].fileName;
		 var fileSize = obj.data.pics[0].fileSize;
		 var fileThumPath = obj.data.pics[0].fileThumPath;
		 $('#pluguploadimg1').append('<span class="pluguploadimgcss"  style="width: 100px;height:100px"><i onclick="deletepulgimg(this,\''+filePath+'\')" class="layui-icon layui-icon-close g_icon"></i><img onclick="openpulgimg(this)" src="'+ fileThumPath +'"  style="width:100%"  class="layui-upload-img "></span>') //图片链接（base64）
		 if(bindelem!=null){
			$(bindelem).val($(bindelem).val()!=''? $(bindelem).val()+";"+filePath : filePath);
		 }
	   }
    },error: function(){
    	  $(".layui-icon-loading").hide();
    	  return layer.msg('上传失败,刷新后重试！');
    }
  });
  
  
  //上传文件
  upload.render({
    elem: '#pluguploadbutton2'
    ,url: '[[${sysUrl}]]/file/uploads'
    ,accept: 'file' //普通文件
   	,before: function(obj){
   		$(".layui-icon-loading").show();
   		  obj.preview(function(index, file, result){//预读本地文件示例，不支持ie8
   		     $('#pluguploadtext2').append(file.name)
   		  });
   	    }
    ,done: function(res){
    	$(".layui-icon-loading").hide();
   	    if($(bindelem).val().split(";").length>=maxnum){
   		  return layer.msg('上传文件已超过最大值');
   	    }
    	if(res.code == '000'){
      	  return layer.msg('上传失败,刷新后重试！');
        }
    	layer.msg('上传成功');
    	if(res != null && res != ""){
    		 var obj =res;
	   		 var filePath = obj.data.pics[0].filePath;
	   		 var fileCode = obj.data.pics[0].fileCode;
	   		 var fileExt = obj.data.pics[0].fileExts;
	   		 var id = obj.data.pics[0].id;
	   		 var name = obj.data.pics[0].name;
	   		 var fileWidth = obj.data.pics[0].fileWidth;
	   		 var fileHeight = obj.data.pics[0].fileHeight;
	   		 var fileName = obj.data.pics[0].fileName;
	   		 var fileSize = obj.data.pics[0].fileSize;
	   		 var fileThumPath = obj.data.pics[0].fileThumPath;
	   		 if(bindelem!=null){
	   			$(bindelem).val($(bindelem).val()!=''? $(bindelem).val()+";"+filePath : filePath);
	   		 }
   	   }
    },error: function(){
    	  $(".layui-icon-loading").hide();
    	return layer.msg('上传失败,刷新后重试！');
    }
  });
  

});

function deletepulgimg(obj,filePath){
	$(obj).parent().remove();
	$(bindelem).val($(bindelem).val().replace(filePath+";",""));
	$(bindelem).val($(bindelem).val().replace(";"+filePath,""));
	$(bindelem).val($(bindelem).val().replace(filePath,""));
}

function openpulgimg(obj){
	//示范一个公告层
    layer.open({
      type: 1
      ,title: false //不显示标题栏
      ,closeBtn: false
      ,shade: 0.8
      ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
      ,btn: ['关闭']
      ,btnAlign: 'c'
      ,moveType: 1 //拖拽模式，0或者1
      ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;"><img src="'+$(obj).attr("src")+'"/></div>'
      ,success: function(layero){
		
      }
    });
}


</script>
