每个人都是天才,你的时间应该做更多改变世界的事。
当前位置:首页 > 源码

帝国ECMS7.5 图集批量上传插件

时间:2018-08-01 来源:笨鸟先飞 作者:NLDY 点击:
安装方法:
一、下载解压上传到e/extend/dist
二、修改e/admin/addNews.php,主要是添加JQUERY,LAYUI脚本
所需添加代码如下
<link href="/e/extend/dist/layui/css/layui.css" rel="stylesheet"> 
<script src="/e/extend/dist/layui/jquery.js"></script>
<script src="/e/extend/dist/layui/layui.js"></script>

三、修改图集字段morepic,将输入表单替换html代码设为以下内容
<button type="button" class="layui-btn  layui-btn-sm" id="bnxfUploadMorepic">
  <i class="layui-icon">&#xe67c;</i>上传图片
</button>
<div id="bnxf_img_morepic">
<?php
if($r['morepic']){
	$marr=explode("\r\n", $r['morepic']);
	$insertMorepic='';
	foreach ($marr as $k => $v) {
		$picArr=explode("::::::", $v);
		$insertMorepic.='<div class="layui-row layui-col-space3">';
		$insertMorepic.='<div class="layui-col-md3">';
		$insertMorepic.='<img src="'.$picArr[1].'">';
		$insertMorepic.='</div>';
		$insertMorepic.='<div class="layui-col-md6">';
		$insertMorepic.='<textarea name="mpicname[]" placeholder="请输入内容" class="layui-textarea">'.$picArr[2].'</textarea>';
		$insertMorepic.='</div>';
		$insertMorepic.='<div class="layui-col-md3">';
		$insertMorepic.='<input name="msmallpic[]" type="hidden" value="'.$picArr[1].'">';
		$insertMorepic.='<input name="mbigpic[]" type="hidden" value="'.$picArr[1].'">';
		$insertMorepic.='<button type="button" class="layui-btn layui-btn-danger layui-btn-xs bnxf-del-pic" data-pic="'.$picArr[1].'">';
		$insertMorepic.='<i class="layui-icon">&#xe640;</i>删除';
		$insertMorepic.='</button>&nbsp;';
		$insertMorepic.='<a class="layui-btn layui-btn-danger layui-btn-xs" href="'.$picArr[1].'" target="_blank">';
		$insertMorepic.='<i class="layui-icon">&#xe64a;</i>预览';
		$insertMorepic.='</a>';
		$insertMorepic.='<button type="button" class="layui-btn layui-btn-danger layui-btn-xs bnxf-set-titlepic" data-pic="'.$picArr[1].'">';
		$insertMorepic.='<i class="layui-icon">&#xe640;</i>设为封面';
		$insertMorepic.='</button>&nbsp;';

		$insertMorepic.='</div>';
		$insertMorepic.='</div>';
	}
	echo $insertMorepic;
}
?>
</div>
<script>

layui.use('upload', function(){
  var upload = layui.upload;

  //执行实例
  var uploadInst = upload.render({
    elem: '#bnxfUploadMorepic' //绑定元素
    ,url: '/e/extend/dist/exec/backUpload.php'
    ,field:'Filedata'
    ,data:{
	<?php
	foreach($hasArr as $k=>$v){
		echo $k.":\"".$v.'",';
	}
	?>
	classid:"<?=$classid?>",
	filepass:"<?=$newstime?>",


    }
    ,multiple:true
    ,done: function(res){
      //上传完毕回调
        var insertMorepic='';
		insertMorepic+='<div class="layui-row layui-col-space3">';
		insertMorepic+='<div class="layui-col-md3">';
		insertMorepic+='<img src="'+res.url+'">';
		insertMorepic+='</div>';
		insertMorepic+='<div class="layui-col-md6">';
		insertMorepic+='<textarea name="mpicname[]" placeholder="请输入内容" class="layui-textarea"></textarea>';
		insertMorepic+='</div>';
		insertMorepic+='<div class="layui-col-md3">';
		insertMorepic+='<input name="msmallpic[]" type="hidden" value="'+res.url+'">';
		insertMorepic+='<input name="mbigpic[]" type="hidden" value="'+res.url+'">';
		insertMorepic+='<button type="button" class="layui-btn layui-btn-danger layui-btn-xs bnxf-del-pic" data-pic="'+res.url+'">';
		insertMorepic+='<i class="layui-icon">&#xe640;</i>删除';
		insertMorepic+='</button>&nbsp;';
		insertMorepic+='<a class="layui-btn layui-btn-danger layui-btn-xs" href="'+res.url+'" target="_blank">';
		insertMorepic+='<i class="layui-icon">&#xe64a;</i>预览';
		insertMorepic+='</a>&nbsp;';
		insertMorepic+='<button type="button" class="layui-btn layui-btn-danger layui-btn-xs bnxf-set-titlepic" data-pic="'+res.url+'">';
		insertMorepic+='<i class="layui-icon">&#xe640;</i>设为封面';
		insertMorepic+='</button>&nbsp;';
		insertMorepic+='</div>';
		insertMorepic+='</div>';
		$("#bnxf_img_morepic").append(insertMorepic);
		if($("#titlepic").val()=='') $("#titlepic").val(res.url);
		var t_img; // 定时器
		var isLoad = true; // 控制变量

		// 判断图片加载状况,加载完成后回调
		isImgLoad(function(){
		    console.log("加载完成...");
		});


    }
    ,error: function(){
      //请求异常回调
      layer.msg('上传出错,请联系QQ58055648解决')
    }
  });
});
$(document).ready(function() {
	$(".bnxf-del-pic").click(function(event) {
		var pic=$(this).attr('data-pic');
		var domNode=$(this).parents(".layui-row");
		$.post('/e/extend/dist/exec/clearPic.php', {
			pic: pic,
	<?php
	foreach($hasArr as $k=>$v){
		echo $k.":\"".$v.'",';
	}
	?>
		}, function(data, textStatus, xhr) {
			domNode.remove();
		});
	});
	$(".bnxf-set-titlepic").click(function(event) {
		$("#titlepic").val($(this).attr("data-pic"));
	});
});


var t_img; // 定时器
var isLoad = true; // 控制变量
// 判断图片加载状况,加载完成后回调
isImgLoad(function(){
    console.log("加载完成...");
});
// 判断图片加载的函数
function isImgLoad(callback){
	console.log("加载...");
    // 注意我的图片类名都是cover,因为我只需要处理cover。其它图片可以不管。
    // 查找所有封面图,迭代处理
    $('#bnxf_img_morepic img').each(function(i,v){
        // 找到为0就将isLoad设为false,并退出each
        if(this.height === 0){
            isLoad = false;
            return false;
        }else{
        	var img=$('#bnxf_img_morepic img').eq(i);
        	var img_w=$('#bnxf_img_morepic img').eq(i).width();
        	var img_h=$('#bnxf_img_morepic img').eq(i).height();

        	if(img_w>img_h){
        		img.css('width', '200px');
        	}
        	else{
        		img.css('height','100px');
        	}
        }
    });
    // 为true,没有发现为0的。加载完毕
    if(isLoad){
        clearTimeout(t_img); // 清除定时器
        // 回调函数
        callback();
    // 为false,因为找到了没有加载完成的图,将调用定时器递归
    }else{
        isLoad = true;
        t_img = setTimeout(function(){
            isImgLoad(callback); // 递归扫描
        },500); // 我这里设置的是500毫秒就扫描一次,可以自己调整
    }
}
</script>
后台效果图

Copyright ©2018 笨鸟先飞苏ICP备14008820号-1

站长QQ:58055648,交流QQ群:3147325