小李SEO博客

网站优化服务
小李seo优化 > 织梦CMS > dedecms后台layui上传图集整合教程

dedecms后台layui上传图集整合教程

flash已经停止更新，使用织梦的小伙伴们经常会出现织梦上传图集的按钮不显示，不显示有电脑没有安装flash或者浏览器屏蔽了，如果想永久的避免这个问题，可以按照以下教程把flash换掉就可以。flash马上要退出舞台了，而织梦的图集上传功能更使用的就是flash控件，安全性也低，而且不能轻松实现多实例多图集我们来把它换一换，换成现在比较流行的layui前端框架 - layui上传模块演示效果

整合功能。支持 gbk / utf8编码织梦程序支持后台、前台、会员接入支持所有模型接入支持每个图片删除一并删除图片文件支持每个图片注释支持每个图片排序支持前台超级简单标签调用每个图集。整合教程。第一步、下载额外所需文件，根据自己网站编码把include里面的"layui"文件夹和"taglib"文件夹放到你网站include文件夹里去本地下载：织梦图集layui上传模块.zip第二步、为后台图片集模型添加layui上传模块，官方原来的图集上传功能保留不动伸手党可以直接下载这4个文件替换即可使用(替换之前建议你备份你自己的这4个文件)/dede/templets/album_add.htm/dede/templets/album_edit.htm/dede/album_add.php/dede/album_edit.php本地下载：织梦后台图片集模型添加layui上传模块4个文件覆盖文件后刷新后台即可使用，下面的教程可忽略掉！！！

一下教程是开发步骤，适用于以上四个文件有过二开的。1、打开 /dede/templets/album_add.htm 找到<div id="thumbnails"></div>在它所在的tr标签下面加入<link href="../include/layui/css/layui.css" rel="stylesheet" media="all"><script src="../include/layui/layui.js" type="text/javascript"></script><tr><td width="100%" height="24" colspan="4" class="bline"><table width="800" border="0" cellspacing="0" cellpadding="0"><tr><td width="80" height="40">&nbsp;<b>默认图集：</b></td><td><button type="button" class="layui-btn layui-btn-sm layui-btn-normal imgurls"><i class="layui-icon layui-icon-upload"></i>上传图片</button></td></tr></table></td></tr><tr><td colspan="4" class="bline"><table width='100%'><tr><td><div class="layui-upload-img"><ul class="layui-upload-list" id="imgurls"></ul></div></td></tr></table></td></tr><script type="text/javascript"> layui.use('upload', function(){ var $ = layui.jquery ,upload = layui.upload; // imgurls 图片上传 var uploadInst = upload.render({ elem: '.imgurls' ,url: '../include/layui/layuiupload.php',multiple: true,accept: 'images' ,acceptMime: 'image/*' ,done: function(res){if(res.code == 0){return layer.msg(res.msg);}$('#imgurls').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon layui-icon-left"></i><i class="toright layui-icon layui-icon-right"></i><i class="close layui-icon layui-icon-close-fill" data-id="' + res.id + '"></i></div><img src="' + res.img + '" class="img" ><input type="text" name="imgurls[alt][]" value="" class="layui-input" /><input type="hidden" name="imgurls[url][]" value="' + res.img + '" /><input type="hidden" name="imgurls[uaid][]" value="' + res.id + '" /></li>');} ,error: function(){ } });$("body").on("click",".close",function(){var id = $(this).data('id');$.get('../include/layui/layuiupload.php',{'dopost':'del','id':id},function(res){})$(this).closest("li").remove();});$("body").on("click",".layui-upload-img ul li .toleft",function(){var li_index = $(this).closest("li").index();if(li_index >= 1){$(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));}});$("body").on("click",".layui-upload-img ul li .toright",function(){var li_index = $(this).closest("li").index();$(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));}); });</script>如图

打开 /dede/templets/album_edit.htm 找到<div id="thumbnails"></div>在它所在的tr标签下面加入<link href="../include/layui/css/layui.css" rel="stylesheet" media="all"><script src="../include/layui/layui.js" type="text/javascript"></script><tr><td width="100%" height="24" colspan="4" class="bline"><table width="800" border="0" cellspacing="0" cellpadding="0"><tr><td width="80" height="40">&nbsp;<b>默认图集：</b></td><td><button type="button" class="layui-btn layui-btn-sm layui-btn-normal imgurls"><i class="layui-icon layui-icon-upload"></i>上传图片</button></td></tr></table></td></tr><tr><td colspan="4" class="bline"><table width='100%'><tr><td><div class="layui-upload-img"><ul class="layui-upload-list" id="imgurls"></ul></div></td></tr></table></td></tr><script type="text/javascript"> layui.use('upload', function(){ var $ = layui.jquery ,upload = layui.upload; // imgurls 图片上传 var uploadInst = upload.render({ elem: '.imgurls' ,url: '../include/layui/layuiupload.php',multiple: true,accept: 'images' ,acceptMime: 'image/*' ,done: function(res){if(res.code == 0){return layer.msg(res.msg);}$('#imgurls').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon layui-icon-left"></i><i class="toright layui-icon layui-icon-right"></i><i class="close layui-icon layui-icon-close-fill" data-id="' + res.id + '"></i></div><img src="' + res.img + '" class="img" ><input type="text" name="imgurls[alt][]" value="" class="layui-input" /><input type="hidden" name="imgurls[url][]" value="' + res.img + '" /><input type="hidden" name="imgurls[uaid][]" value="' + res.id + '" /></li>');} ,error: function(){ //失败重传 } });$("body").on("click",".close",function(){var id = $(this).data('id');$.get('../include/layui/layuiupload.php',{'dopost':'del','id':id},function(res){})$(this).closest("li").remove();});$("body").on("click",".layui-upload-img ul li .toleft",function(){var li_index = $(this).closest("li").index();if(li_index >= 1){$(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));}});$("body").on("click",".layui-upload-img ul li .toright",function(){var li_index = $(this).closest("li").index();$(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));}); });</script>如图

打开 /dede/album_add.php 找到//加入附加表在它上面加入//图集字段 imgurlsif(is_array($_POST['imgurls']['url'])){$my_imgurls = "";foreach($_POST['imgurls']['url'] as $key => $val){$my_imgurls .= "{dede:img ddimg='$val' text='{$_POST['imgurls']['alt'][$key]}' width='' height='' uaid='{$_POST['imgurls']['uaid'][$key]}'}$val{/dede:img}";}}$imgurls .= addslashes($my_imgurls);

打开 /dede/album_edit.php 找到//更新附加表在它上面加入//图集字段 imgurlsif(is_array($_POST['imgurls']['url'])){$my_imgurls = "";foreach($_POST['imgurls']['url'] as $key => $val){$my_imgurls .= "{dede:img ddimg='$val' text='{$_POST['imgurls']['alt'][$key]}' width='' height='' uaid='{$_POST['imgurls']['uaid'][$key]}'}$val{/dede:img}";}}$imgurls .= addslashes($my_imgurls);

内容页模板调用图集标签新写法。<h2>默认图集</h2><ul>{dede:imagelist}<li><img src="[field:imgsrc/]" alt="[field:text/]" width="220" height="150"><p>[field:text/]</p></li>{/dede:imagelist}</ul><h2>户型图片</h2><ul>{dede:imagelist field="huxing"}<li><img src="[field:imgsrc/]" alt="[field:text/]" width="220" height="150"><p>[field:text/]</p></li>{/dede:imagelist}</ul>特别说明{dede:imagelist field="huxing"}field='图片集字段'不填的话就是调用图集默认

织梦多个图集多实例教程。在操作下面的教程之前必须确定你已经完成上面第一、第二、第三步第一步、附加表里添加多个图集字段，例如 户型图片 字段后台-系统-SQL工具-SQL命令行工具ALTER TABLE dede_addonimages ADD `huxing` text;

dede_addonimages是我的图集模型附加表，注意自己的附加表，千万别写错了

打开 /dede/templets/album_add.htm 找到id="imgurls"在它所在的tr下面加入<tr><td width="100%" height="24" colspan="4" class="bline"><table width="800" border="0" cellspacing="0" cellpadding="0"><tr><td width="80" height="40">&nbsp;<b>户型图片：</b></td><td><button type="button" class="layui-btn layui-btn-sm layui-btn-normal huxing"><i class="layui-icon layui-icon-upload"></i>上传图片</button></td></tr></table></td></tr><tr><td colspan="4" class="bline"><table width='100%'><tr><td><div class="layui-upload-img"><ul class="layui-upload-list" id="huxing"></ul></div></td></tr></table></td></tr>如图，注意标注的地方

继续找到// imgurls 图片上传在它上面加入// huxing 图片上传var uploadInst = upload.render({elem: '.huxing',url: '../include/layui/layuiupload.php',multiple: true,accept: 'images',acceptMime: 'image/*',done: function(res){if(res.code == 0){return layer.msg(res.msg);}$('#huxing').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon layui-icon-left"></i><i class="toright layui-icon layui-icon-right"></i><i class="close layui-icon layui-icon-close-fill" data-id="' + res.id + '"></i></div><img src="' + res.img + '" class="img" ><input type="text" name="huxing[alt][]" value="" class="layui-input" /><input type="hidden" name="huxing[url][]" value="' + res.img + '" /><input type="hidden" name="huxing[uaid][]" value="' + res.id + '" /></li>');},error: function(){//失败重传}});如图，注意标注的地方

打开 /dede/templets/album_edit.htm 找到id="imgurls"在它所在的tr下面加入<tr><td width="100%" height="24" colspan="4" class="bline"><table width="800" border="0" cellspacing="0" cellpadding="0"><tr><td width="80" height="40">&nbsp;<b>户型图片：</b></td><td><button type="button" class="layui-btn layui-btn-sm layui-btn-normal huxing"><i class="layui-icon layui-icon-upload"></i>上传图片</button></td></tr></table></td></tr><tr><td colspan="4" class="bline"><table width='100%'><tr><td><div class="layui-upload-img"><ul class="layui-upload-list" id="huxing"><?phpif($addRow['huxing']!=""){$dtp = new DedeTagParse();$dtp->LoadSource($addRow['huxing']);if(is_array($dtp->CTags)){$fhtml = '';foreach($dtp->CTags as $ctag){if($ctag->GetName()=="img"){$bigimg = trim($ctag->GetInnerText());$text = trim($ctag->GetAtt('text'),'‘');$uaid = trim($ctag->GetAtt('uaid'),'‘');$fhtml .= "<li class="item_img"><div class="operate"><i class="toleft layui-icon layui-icon-left"></i><i class="toright layui-icon layui-icon-right"></i><i class="close layui-icon layui-icon-close-fill" data-id="{$uaid}"></i></div><img src="{$bigimg}" class="img" ><input type="text" name="huxing[alt][]" value="{$text}" class="layui-input" /><input type="hidden" name="huxing[url][]" value="{$bigimg}" /><input type="hidden" name="huxing[uaid][]" value="{$uaid}" /></li>";}}echo $fhtml;}$dtp->Clear();}?></ul></div></td></tr></table></td></tr>如图，注意标注的字段部分

继续找到// imgurls 图片上传在它上面加入// huxing 图片上传var uploadInst = upload.render({elem: '.huxing',url: '../include/layui/layuiupload.php',multiple: true,accept: 'images',acceptMime: 'image/*',done: function(res){if(res.code == 0){return layer.msg(res.msg);}$('#huxing').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon layui-icon-left"></i><i class="toright layui-icon layui-icon-right"></i><i class="close layui-icon layui-icon-close-fill" data-id="' + res.id + '"></i></div><img src="' + res.img + '" class="img" ><input type="text" name="huxing[alt][]" value="" class="layui-input" /><input type="hidden" name="huxing[url][]" value="' + res.img + '" /><input type="hidden" name="huxing[uaid][]" value="' + res.id + '" /></li>');},error: function(){//失败重传}});如图，注意标注的字段

打开 /dede/album_add.php 找到//生成HTML在它上面加入//新增图集字段 huxingif(is_array($_POST['huxing']['url'])){$huxing = "";foreach($_POST['huxing']['url'] as $key => $val){$huxing .= "{dede:img ddimg='$val' text='{$_POST['huxing']['alt'][$key]}' width='' height='' uaid='{$_POST['huxing']['uaid'][$key]}'}$val{/dede:img}";}if($huxing){$huxing = addslashes($huxing);$upquery = "UPDATE `$addtable` SET `huxing`='$huxing' WHERE aid='$arcID' ";$dsql->ExecuteNoneQuery($upquery);}}如图，注意标注的字段

打开 /dede/album_edit.php 找到//生成HTML在它上面加入//新增图集字段 huxing$huxing = "";if(is_array($_POST['huxing']['url'])){foreach($_POST['huxing']['url'] as $key => $val){$huxing .= "{dede:img ddimg='$val' text='{$_POST['huxing']['alt'][$key]}' width='' height='' uaid='{$_POST['huxing']['uaid'][$key]}'}$val{/dede:img}";}}$huxing = addslashes($huxing);$upquery = "UPDATE `$addtable` SET `huxing`='$huxing' WHERE aid='$id' ";$dsql->ExecuteNoneQuery($upquery);如图，注意标注的字段

内容页标签新写法参考上面使用layui第一张图作为缩略图打开 /dede/album_add.php 找到生成文档ID在它上面加入//使用layui第一张图作为缩略图if($ddisfirst==1 && $litpic==''){if(isset($_POST['imgurls']['url'][0])){$litpic = $_POST['imgurls']['url'][0];}}如图

上一篇：织梦cms把数据保存到数据库附加表出错 下一篇：织梦cms网站安全性设置方法
织梦cms相关文章阅读

  • 织梦cms问答模块匿名提问设置方法

    小李网络公司介绍织梦cms问答模块匿名提问设置方法知识,包括织梦DedeCMS5.7问答模块实现游客匿名提问、问答和查看的方法.dedecms模块安装dedecms信箱模块dedecms模块打不开dedecms模块删除dedecms模块...

  • 织梦cms程序调用日期格式化形式大全

    小李网络公司介绍织梦cms程序调用日期格式化标签代码知识,包括dedecms调用日期格式化形式大全-织梦二次开发-跟版网,dedecms织梦系统dedecms首页织梦cms移动织梦内容管理系统是什么织梦默认模板...

  • 织梦cms内容页调用seotitle标题的写法

    小李网络公司介绍织梦cms内容页调用seotitle标题知识,包括DEDECMS织梦内容页调用seotitle标题的写法_织梦园,织梦栏目内容调用织梦相关文章调用织梦首页调用文章列表dede织梦调用标签dedecms调用页...

  • 织梦cms系统中联动类别制作说明

    小李网络公司介绍织梦cms系统中联动类别制作说明知识,包括织梦内容管理系统登录系统类别什么意思cms内容管理系统织梦建站系统下载织梦云建站系统什么是系统类织梦CNC网站系统免费的吗织...

  • 织梦cms调用[field:title/]标签出现b标签怎么去掉

    小李网络公司姐织梦cms调用[field:title/]标签只是.包括dedecms调用[field:title/]标签时,标题出现b标签怎么去掉,网站的title标签是什么a标签的title属性html title属性 样式html的title标签属性设置网站titl...

  • 织梦cms程序安装方法与步骤

    小李网络公司介绍织梦cms程序安装方法与步骤知识,包括写程序的步骤织梦安装不了离婚的步骤程序怎样去安装dedecmsdedecms环境安装dedecms的安装目录dedecmsphp安装dedecms织梦安装包....

  • 织梦cms网站更改提示信息修改方法

    小李网络公司介绍织梦cms网站更改提示信息修改方法知识,包括dedecms内容修改dede模板更改教程dedecms更改栏目iddede更改dede文件夹dedecms修改缩略图修改dedecms数据库dedecms注册选项dedecmsurl修改....

  • 织梦cms生成select下拉式友情链接列表方法

    小李网络公司介绍织梦cms生成select下拉式友情链接列表方法知识,包括织梦标签教程dedecms删除织梦链织梦标签替换织梦标签理解dede下拉友情链接织梦友情链接样式dede织梦调用标签织梦添加链接...

  • 织梦cms网站去掉网址域名后面index.html方法

    小李网络公司介绍织梦cms网站去掉网址域名后面index.html方法知识,包括dedecms我的域名手机html源码织梦网站怎么更改域名dedecms配置域名dedecmsphp调域名dede多域名dedecms调用域名织梦网站域名....

  • 织梦cms网站SEO优化方法技巧与注意事项

    小李网络公司介绍织梦cms网站SEO优化方法技巧与注意事项知识,包括织梦cms建站教程dedecms织梦系统织梦cms移动织梦cms网站织梦默认模板管理织梦cms后端模板织梦内容管理系统是什么织梦模板大全...

  • 网站织梦cms5.7程序转换帝国cms7.2完整步骤

    小李网络公司介绍织梦cms5.7转换帝国cms7.2步骤知识.包括帝国cms二次开发织梦5.7转换帝国cms7.2的简单方法.织梦5.7转换帝国cms7.2完整版_织梦58.织梦cms建站教程帝国cms好用吗phpcms和帝国cms哪个好帝国...

  • 织梦cms5.7版本修改编辑器无法提交解决办法

    小李网络公司介绍织梦cms5.7版本修改编辑器无法提交解决办法知识,包括论文终稿提交了还能修改吗抓包修改数据犯法吗增强属性编辑器的块怎么修改pdf怎么编辑修改apk编辑器修改签名块编辑器...

SEO公司排名
 
QQ在线咨询
SEM竞价推广
137-1296-7640
SEO优化外包
137-1296-7640
微信扫一扫
打开小李SEO博客