首页 >

织梦DedeCMS图集整合layui上传可多图集多实例可会员多图集

织梦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 找到


在它所在的tr标签下面加入

默认图集:

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('
  • ');} ,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));}); });


    如图

    织梦DedeCMS图集整合layui上传可多图集多实例可会员多图集

    2 | 打开 /dede/templets/album_edit.htm 找到


    在它所在的tr标签下面加入

      默认图集:

      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('
    • ');} ,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));}); });


      如图

      织梦DedeCMS图集整合layui上传可多图集多实例可会员多图集

      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);

      第三步 | 内容页模板调用图集标签新写法

      默认图集
        {dede:imagelist}
      • [field:text/]

      • {/dede:imagelist}
      户型图片
        {dede:imagelist field="huxing"}
      • [field:text/]

      • {/dede:imagelist}

      特别说明

      {dede:imagelist field=”huxing”}

      field=’图片集字段’

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

      织梦多个图集多实例教程

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

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

      后台-系统-SQL工具-SQL命令行工具

      ALTER TABLE dede_addonimages ADD `huxing` text;

      织梦DedeCMS图集整合layui上传可多图集多实例可会员多图集

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

      织梦DedeCMS图集整合layui上传可多图集多实例可会员多图集

      第二步 | 打开 /dede/templets/album_add.htm 找到

      id="imgurls"

      在它所在的tr下面加入

        户型图片:

        如图,注意标注的地方

        织梦DedeCMS图集整合layui上传可多图集多实例可会员多图集

        继续找到

        // 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('
      • ');},error: function(){//失败重传}});

        如图,注意标注的地方

        织梦DedeCMS图集整合layui上传可多图集多实例可会员多图集

        第三步 | 打开 /dede/templets/album_edit.htm 找到

        id="imgurls"

        在它所在的tr下面加入

          户型图片:

          如图,注意标注的字段部分

          织梦DedeCMS图集整合layui上传可多图集多实例可会员多图集

          继续找到

          // 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('
        • ');},error: function(){//失败重传}});

          如图,注意标注的字段

          织梦DedeCMS图集整合layui上传可多图集多实例可会员多图集

          第四步 | 打开 /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);}}

          如图,注意标注的字段

          织梦DedeCMS图集整合layui上传可多图集多实例可会员多图集

          第五步 | 打开 /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);

          如图,注意标注的字段

          织梦DedeCMS图集整合layui上传可多图集多实例可会员多图集

          第六步 | 内容页标签新写法参考上面

          使用layui第一张图作为缩略图

          打开 /dede/album_add.php 找到

          生成文档ID

          在它上面加入

          //使用layui第一张图作为缩略图if($ddisfirst==1 && $litpic==''){if(isset($_POST['imgurls']['url'][0])){$litpic = $_POST['imgurls']['url'][0];}}

          如图

          织梦DedeCMS图集整合layui上传可多图集多实例可会员多图集


          织梦DedeCMS图集整合layui上传可多图集多实例可会员多图集
        • 织梦DedeCMS会员中心发布图集上传缩略图为空的解决办法
        • 织梦DedeCMS会员中心发布图集上传缩略图为空的解决办法 | 织梦DedeCMS会员中心发布图集上传缩略图为空的解决办法 ...

          织梦DedeCMS图集整合layui上传可多图集多实例可会员多图集
        • Windows虚拟主机指定目录禁用脚本执行权限方法
        • Windows虚拟主机指定目录禁用脚本执行权限方法 | Windows虚拟主机指定目录禁用脚本执行权限方法 ...

          织梦DedeCMS图集整合layui上传可多图集多实例可会员多图集
        • 织梦DedeCMS后台验证码不显示怎么办???
        • 织梦DedeCMS后台验证码不显示怎么办??? | 织梦DedeCMS后台验证码不显示怎么办??? ...

          © 牛的日记 | www.liuzhongwei.com
          网站部分内容来源于网友供稿,若有侵权请联系删除,970928#QQ.com
            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 .= "
          • ";}}echo $fhtml;}$dtp->Clear();}?>