位置: IT常识 - 正文

织梦图集整合layui上传可多图集多实例可会员多图集(织梦使用教程)

编辑:rootadmin

推荐整理分享织梦图集整合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>

如图

2、打开 /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>

如图

3、打开 /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);

4、打开 /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='图片集字段'

织梦图集整合layui上传可多图集多实例可会员多图集(织梦使用教程)

不填的话就是调用图集默认

织梦多个图集多实例教程

在操作下面的教程之前必须确定你已经完成上面第一、第二、第三步

第一步、附加表里添加多个图集字段,例如 户型图片 字段

后台-系统-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];}}

如图

免责

本文链接地址:https://www.jiuchutong.com/zhishi/310883.html 转载请保留说明!

上一篇:织梦dedecms如何更改plus文件夹名称(dede织梦怎么转成zblog)

下一篇:ES + Redis + MySQL,这个高可用架构设计太顶了!

  • 微博营销如何帮助企业登高望远(微博营销操作流程)

    微博营销如何帮助企业登高望远(微博营销操作流程)

  • 格力空调怎么定时2小时(格力空调怎么定时怎么设置时间)

    格力空调怎么定时2小时(格力空调怎么定时怎么设置时间)

  • 微信怎样举报让他永久封号呢(微信如何举报别人百分百成功)

    微信怎样举报让他永久封号呢(微信如何举报别人百分百成功)

  • 苹果手机可以恢复微信聊天记录吗(苹果手机可以恢复短信息吗)

    苹果手机可以恢复微信聊天记录吗(苹果手机可以恢复短信息吗)

  • 新开的手机号被别人注册了微信怎么办(新开的手机号被注册了抖音)

    新开的手机号被别人注册了微信怎么办(新开的手机号被注册了抖音)

  • 抖音视频加速怎么弄的(抖音视频加速怎么做)

    抖音视频加速怎么弄的(抖音视频加速怎么做)

  • 华为手机的夜间模式在哪里(华为手机的夜间模式在哪里找)

    华为手机的夜间模式在哪里(华为手机的夜间模式在哪里找)

  • 华为标准和鲜艳哪个护眼(华为标准和鲜艳色域)

    华为标准和鲜艳哪个护眼(华为标准和鲜艳色域)

  • 芒果TV怎么没弹幕了(芒果tv怎么没弹幕了)

    芒果TV怎么没弹幕了(芒果tv怎么没弹幕了)

  • snkrs取消订单后,钱什么时候会返还(snkrs取消订单有影响)

    snkrs取消订单后,钱什么时候会返还(snkrs取消订单有影响)

  • ipadmini可以用笔吗(ipad mini2可以用笔)

    ipadmini可以用笔吗(ipad mini2可以用笔)

  • pad屏幕无法旋转(pad屏幕旋转不了)

    pad屏幕无法旋转(pad屏幕旋转不了)

  • 红米为什么下载不了微信了(红米为什么下载不了taptap)

    红米为什么下载不了微信了(红米为什么下载不了taptap)

  • ku波段频率范围(ku波段一般是什么设备)

    ku波段频率范围(ku波段一般是什么设备)

  • 苹果手机开不了机怎么办(苹果手机开不了机只显示白苹果)

    苹果手机开不了机怎么办(苹果手机开不了机只显示白苹果)

  • 手机qq怎么查看留言(手机qq怎么查看密码是多少)

    手机qq怎么查看留言(手机qq怎么查看密码是多少)

  • 手机wps怎么分享文件夹(手机wps怎么分享ppt)

    手机wps怎么分享文件夹(手机wps怎么分享ppt)

  • 手机怎么下载应用到sd卡(手机怎么下载应用市场)

    手机怎么下载应用到sd卡(手机怎么下载应用市场)

  • 苹果11怎么看天气(苹果11怎么看天气预报)

    苹果11怎么看天气(苹果11怎么看天气预报)

  • 苹果11和苹果xr屏幕一样吗(苹果11和苹果xr屏幕尺寸一样吗)

    苹果11和苹果xr屏幕一样吗(苹果11和苹果xr屏幕尺寸一样吗)

  • 手机号码被运营商封了怎么办(手机号码被运营商屏蔽怎么恢复)

    手机号码被运营商封了怎么办(手机号码被运营商屏蔽怎么恢复)

  • 美团袋鼠豆在哪里找(美团外卖的袋鼠)

    美团袋鼠豆在哪里找(美团外卖的袋鼠)

  • pr怎么让声音慢慢减弱(pr怎么让声音慢慢淡出)

    pr怎么让声音慢慢减弱(pr怎么让声音慢慢淡出)

  • 电脑版钉钉怎么改头像(电脑版钉钉怎么扫描二维码图片)

    电脑版钉钉怎么改头像(电脑版钉钉怎么扫描二维码图片)

  •  搜狐视频如何投屏电视(搜狐视频如何投屏)

    搜狐视频如何投屏电视(搜狐视频如何投屏)

  • 淘宝如何开店(淘宝如何开店注册)

    淘宝如何开店(淘宝如何开店注册)

  • 公司购买车辆的好处
  • 收取职工工会会费收据
  • 一般纳税人需要缴纳哪些税种
  • 油补是福利费还是工资
  • 个税返还手续费奖励员工需要交个税吗
  • 房产过户需要交个人所得税吗
  • 哪些科目需要计提资产减值损失
  • 金税三期个人所得税税率
  • 本年利润怎样结转未分配利润
  • 差旅费报销怎么做账
  • 公司注销时认缴不到位怎么办
  • 背书转让的电子承兑汇票开收据还是发票
  • 二手车公司销售二手车的税率
  • 住宅租给公司需要注意什么
  • 发票作废税金怎么算
  • 开加工费的发票该如何抵扣?
  • 本单位员工投稿怎么写
  • 集团公司内部无偿借贷增值税
  • 统一社会信用代码证
  • 房地产开发项目土地使用权的取得方式
  • 外贸出口企业的租金能退税吗
  • 公账转公账没有发票
  • win10一段时间不动黑屏
  • macos big sur将安装在macintosh hd
  • 代销返利业务会计处理
  • win10怎么推送win11
  • 项目融资中风险有哪些
  • 以摊余成本计量且其变动计入当期损益
  • 基建项目招标流程
  • 无纸化办理
  • vue图片放在哪里
  • 股东借款会计处理
  • python解密加密文件
  • 社保台账显示未托收
  • 手工帐月末结转会计分录
  • 计提本月工资社保怎么扣
  • java自增自减运算符的规则
  • 缴纳增值税的营业收入
  • 应收账款红冲什么意思
  • erp用友u8操作教程
  • db2 insert timestamp
  • 新租赁准则承租人租金用什么科目
  • 报税残疾人保障费怎么算
  • 土地增值税间接转让怎么算
  • 民间非营利组织会计制度及操作实务
  • 总资产报酬率的高低直接影响净资产收益率的高低
  • 转让技术所有权是其他业务收入吗
  • 无形资产减值准备借贷方向增减
  • 应付账款清账账务处理
  • 增值税减免附加税用计提吗
  • 闲置资产计提折旧
  • 自产的产品用于生产缴纳增值税
  • 股东借款转增资本公积会计处理
  • 无票收入怎么写分录
  • 记账发生错账怎么办
  • sql server2019数据库
  • win8.1 0x80072efe
  • freebsd 升级
  • ghost安装出错
  • Linux系统配置网关
  • win1021h2正式版
  • win7系统资源管理器无响应
  • pascl32.exe - pascl32是什么进程 有什么用
  • linux远程gui
  • win10系统样子
  • win7系统怎么关闭屏幕保护
  • 电脑qq语音界面
  • excel嵌入图片变成代码怎么办
  • linux shell脚本命令
  • 原生js实现路由
  • 同一个文件夹中的文件可以同名吗
  • python日志管理系统
  • 使用GeoPainter一步一步布置场景
  • Android事件处理模型
  • auto.js获取剪切板内容
  • js判断ua
  • 深圳国家税务局赵雨婷处长
  • 病历证明在医院保存多久
  • 建筑工程异地预缴税款时间限制
  • 2013年山西高考作文
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设