DedeCMS织梦

DedeCMS织梦图集Flash控件停用无法上传图片处理

也想出现在这里?联系我们
创客云

我们知道由于 Flash 控件与 2020 年停用,导致 DedeCMS 织梦图集无法上传图片,虽然 flash 已经退出舞台了,而织梦的图集上传功能仍然使用的是 flash 控件,目前不仅无法正常上传图像而且也不支持多实例多图集,我们来把它换一换,换成现在比较流行的 layui 前端框架 - layui 上传模块。
DedeCMS织梦图集Flash控件停用无法上传图片处理-云模板

整合教程

第一步、下载额外所需文件,根据自己网站编码

也想出现在这里?联系我们
创客主机

把下载得到的文件解压吗,然后找到 layui 上传模块 文件夹,然后选择自己 DedeCMS 编码对应的文件夹,然后把"layui"文件夹和"taglib"文件夹放到你网站 include 文件夹里去。

第二步、为后台图片集模型添加 layui 上传模块,官方原来的图集上传功能保留不动

伸手党 可以直接把下载解压后的文件夹 图集模型上传模块 下的 4 个文件替换即可使用(替换之前建议你备份你自己的这 4 个文件)

  1.     /dede/templets/album_add.htm
  2.     /dede/templets/album_edit.htm
  3.     /dede/album_add.php
  4.     /dede/album_edit.php

覆盖文件后刷新后台即可使用。

如果您使用的是默认单个图集,没有对 DedeCMS 图集进行开发过,下面的教程可略过无需理会【注意,二开的后台请根据教程来操作】。

二开教程

1、打开 /dede/templets/album_add.htm 找到

  1. <div id="thumbnails"></div>

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

  1. <link href="../include/layui/css/layui.css" rel="stylesheet" media="all">
  2. <script src="../include/layui/layui.js" type="text/javascript"></script>
  3. <tr>
  4.     <td width="100%" height="24" colspan="4" class="bline">
  5.         <table width="800" border="0" cellspacing="0" cellpadding="0">
  6.             <tr>
  7.                 <td width="80" height="40">&nbsp;<b>默认图集:</b></td>
  8.                 <td><button type="button" class="layui-btn layui-btn-sm layui-btn-normal imgurls"><i class="layui-icon layui-icon-upload"></i>上传图片</button></td>
  9.             </tr>
  10.         </table>
  11.     </td>
  12. </tr>
  13. <tr>
  14.     <td colspan="4" class="bline">
  15.         <table width='100%'>
  16.             <tr>
  17.                 <td><div class="layui-upload-img"><ul class="layui-upload-list" id="imgurls"></ul></div></td>
  18.             </tr>
  19.         </table>
  20.     </td>
  21. </tr>
  22. <script type="text/javascript">
  23.     layui.use('upload', function(){
  24.         var $ = layui.jquery
  25.             ,upload = layui.upload;
  26.  
  27.         // imgurls 图片上传
  28.         var uploadInst = upload.render({
  29.             elem: '.imgurls'
  30.             ,url: '../include/layui/layuiupload.php'
  31.             ,multiple: true
  32.             ,accept: 'images'
  33.             ,acceptMime: 'image/*'
  34.             ,done: function(res){
  35.                 if(res.code == 0){
  36.                     return layer.msg(res.msg);
  37.                 }
  38.                 $('#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>');
  39.             }
  40.             ,error: function(){
  41.  
  42.             }
  43.         });
  44.  
  45.         $("body").on("click",".close",function(){
  46.             var id = $(this).data('id');
  47.             $.get('../include/layui/layuiupload.php',{'dopost':'del','id':id},function(res){})
  48.             $(this).closest("li").remove();
  49.         });
  50.  
  51.         $("body").on("click",".layui-upload-img ul li .toleft",function(){
  52.             var li_index = $(this).closest("li").index();
  53.             if(li_index >= 1){
  54.                 $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
  55.             }
  56.         });
  57.         $("body").on("click",".layui-upload-img ul li .toright",function(){
  58.             var li_index = $(this).closest("li").index();
  59.             $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
  60.         });
  61.  
  62.     });
  63. </script>

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

  1. <div id="thumbnails"></div>

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

  1. <link href="../include/layui/css/layui.css" rel="stylesheet" media="all">
  2. <script src="../include/layui/layui.js" type="text/javascript"></script>
  3. <tr>
  4.     <td width="100%" height="24" colspan="4" class="bline">
  5.         <table width="800" border="0" cellspacing="0" cellpadding="0">
  6.             <tr>
  7.                 <td width="80" height="40">&nbsp;<b>默认图集:</b></td>
  8.                 <td><button type="button" class="layui-btn layui-btn-sm layui-btn-normal imgurls"><i class="layui-icon layui-icon-upload"></i>上传图片</button></td>
  9.             </tr>
  10.         </table>
  11.     </td>
  12. </tr>
  13. <tr>
  14.     <td colspan="4" class="bline">
  15.         <table width='100%'>
  16.             <tr>
  17.                 <td><div class="layui-upload-img"><ul class="layui-upload-list" id="imgurls"></ul></div></td>
  18.             </tr>
  19.         </table>
  20.     </td>
  21. </tr>
  22. <script type="text/javascript">
  23.     layui.use('upload', function(){
  24.         var $ = layui.jquery
  25.             ,upload = layui.upload;
  26.  
  27.         // imgurls 图片上传
  28.         var uploadInst = upload.render({
  29.             elem: '.imgurls'
  30.             ,url: '../include/layui/layuiupload.php'
  31.             ,multiple: true
  32.             ,accept: 'images'
  33.             ,acceptMime: 'image/*'
  34.             ,done: function(res){
  35.                 if(res.code == 0){
  36.                     return layer.msg(res.msg);
  37.                 }
  38.                 $('#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>');
  39.             }
  40.             ,error: function(){
  41.                 //失败重传
  42.  
  43.             }
  44.         });
  45.  
  46.         $("body").on("click",".close",function(){
  47.             var id = $(this).data('id');
  48.             $.get('../include/layui/layuiupload.php',{'dopost':'del','id':id},function(res){})
  49.             $(this).closest("li").remove();
  50.         });
  51.  
  52.         $("body").on("click",".layui-upload-img ul li .toleft",function(){
  53.             var li_index = $(this).closest("li").index();
  54.             if(li_index >= 1){
  55.                 $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
  56.             }
  57.         });
  58.         $("body").on("click",".layui-upload-img ul li .toright",function(){
  59.             var li_index = $(this).closest("li").index();
  60.             $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
  61.         });
  62.  
  63.     });
  64. </script>

3、打开 /dede/album_add.php 找到

  1. //加入附加表

在它上面加入

  1. //图集字段 imgurls
  2. if(is_array($_POST['imgurls']['url']))
  3. {
  4.     $my_imgurls = "";
  5.     foreach($_POST['imgurls']['url'] as $key => $val)
  6.     {
  7.         $my_imgurls .= "{dede:img ddimg='$val' text='{$_POST['imgurls']['alt'][$key]}' width='' height='' uaid='{$_POST['imgurls']['uaid'][$key]}'}$val{/dede:img}\r\n";
  8.     }
  9. }
  10. $imgurls .= addslashes($my_imgurls);

4、打开 /dede/album_edit.php 找到

  1. //更新附加表

在它上面加入

  1. //图集字段 imgurls
  2. if(is_array($_POST['imgurls']['url']))
  3. {
  4.     $my_imgurls = "";
  5.     foreach($_POST['imgurls']['url'] as $key => $val)
  6.     {
  7.         $my_imgurls .= "{dede:img ddimg='$val' text='{$_POST['imgurls']['alt'][$key]}' width='' height='' uaid='{$_POST['imgurls']['uaid'][$key]}'}$val{/dede:img}\r\n";
  8.     }
  9. }
  10. $imgurls .= addslashes($my_imgurls);

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

  1. <h2>默认图集</h2>
  2.     <ul>
  3.     {dede:imagelist}
  4.     <li>
  5.         <img src="[field:imgsrc/]" alt="[field:text/]" width="220" height="150">
  6.         <p>[field:text/]</p>
  7.     </li>
  8.     {/dede:imagelist}
  9. </ul>
  10.  
  11. <h2>户型图片</h2>
  12. <ul>
  13.     {dede:imagelist field="huxing"}
  14.     <li>
  15.         <img src="[field:imgsrc/]" alt="[field:text/]" width="220" height="150">
  16.         <p>[field:text/]</p>
  17.     </li>
  18.     {/dede:imagelist}
  19. </ul>

特别说明

  1. {dede:imagelist field="huxing"}

field='图片集字段'

不填的话就是调用图集默认,织梦多个图集多实例教程

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

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

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

  1. ALTER TABLE dede_addonimages ADD `huxing` text;

dede_addonimages 是我的图集模型附加表,注意自己的附加表,千万别写错了
DedeCMS织梦图集Flash控件停用无法上传图片处理-云模板
第二步、打开 /dede/templets/album_add.htm 找到

  1. id="imgurls"

在它所在的 tr 下面加入

  1. <tr>
  2.     <td width="100%" height="24" colspan="4" class="bline">
  3.         <table width="800" border="0" cellspacing="0" cellpadding="0">
  4.             <tr>
  5.                 <td width="80" height="40">&nbsp;<b>户型图片:</b></td>
  6.                 <td>
  7.                     <button type="button" class="layui-btn layui-btn-sm layui-btn-normal huxing">
  8.                         <i class="layui-icon layui-icon-upload"></i>上传图片
  9.                     </button>
  10.                 </td>
  11.             </tr>
  12.         </table>
  13.     </td>
  14. </tr>
  15. <tr>
  16.     <td colspan="4" class="bline">
  17.         <table width='100%'>
  18.             <tr>
  19.                 <td>
  20.                     <div class="layui-upload-img">
  21.                         <ul class="layui-upload-list" id="huxing"></ul>
  22.                     </div>
  23.                 </td>
  24.             </tr>
  25.         </table>
  26.     </td>
  27. </tr>

如图,注意标注的地方
DedeCMS织梦图集Flash控件停用无法上传图片处理-云模板
继续找到

  1. // imgurls 图片上传

在它上面加入

  1. // huxing 图片上传
  2. var uploadInst = upload.render({
  3.     elem: '.huxing'
  4.     ,url: '../include/layui/layuiupload.php'
  5.     ,multiple: true
  6.     ,accept: 'images'
  7.     ,acceptMime: 'image/*'
  8.     ,done: function(res){
  9.         if(res.code == 0){
  10.             return layer.msg(res.msg);
  11.         }
  12.         $('#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>');
  13.     }
  14.     ,error: function(){
  15.         //失败重传
  16.  
  17.     }
  18. });

如图,注意标注的地方
DedeCMS织梦图集Flash控件停用无法上传图片处理-云模板
第三步、打开 /dede/templets/album_edit.htm 找到

  1. id="imgurls"

在它所在的 tr 下面加入

  1. <tr>
  2.     <td width="100%" height="24" colspan="4" class="bline">
  3.         <table width="800" border="0" cellspacing="0" cellpadding="0">
  4.             <tr>
  5.                 <td width="80" height="40">&nbsp;<b>户型图片:</b></td>
  6.                 <td>
  7.                     <button type="button" class="layui-btn layui-btn-sm layui-btn-normal huxing">
  8.                         <i class="layui-icon layui-icon-upload"></i>上传图片
  9.                     </button>
  10.                 </td>
  11.             </tr>
  12.         </table>
  13.     </td>
  14. </tr>
  15. <tr>
  16.     <td colspan="4" class="bline">
  17.         <table width='100%'>
  18.             <tr>
  19.                 <td>
  20.                     <div class="layui-upload-img">
  21.                         <ul class="layui-upload-list" id="huxing">
  22.                             <?php
  23.                             if($addRow['huxing']!="")
  24.                             {
  25.                                 $dtp = new DedeTagParse();
  26.                                 $dtp->LoadSource($addRow['huxing']);
  27.                                 if(is_array($dtp->CTags))
  28.                                 {
  29.                                     $fHTML = '';
  30.                                     foreach($dtp->CTags as $ctag)
  31.                                     {
  32.                                         if($ctag->GetName()=="img")
  33.                                         {
  34.                                             $bigimg = trim($ctag->GetInnerText());
  35.                                             $text = trim($ctag->GetAtt('text'),'‘');
  36.                                             $uaid = trim($ctag->GetAtt('uaid'),'‘');
  37.                                             $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>";
  38.                                         }
  39.                                     }
  40.                                     echo $fhtml;
  41.                                 }
  42.                                 $dtp->Clear();
  43.                             }
  44.                             ?>
  45.                         </ul>
  46.                     </div>
  47.                 </td>
  48.             </tr>
  49.         </table>
  50.     </td>
  51. </tr>

如图,注意标注的字段部分
DedeCMS织梦图集Flash控件停用无法上传图片处理-云模板
继续找到

  1. // imgurls 图片上传

在它上面加入

  1. // huxing 图片上传
  2. var uploadInst = upload.render({
  3.     elem: '.huxing'
  4.     ,url: '../include/layui/layuiupload.php'
  5.     ,multiple: true
  6.     ,accept: 'images'
  7.     ,acceptMime: 'image/*'
  8.     ,done: function(res){
  9.         if(res.code == 0){
  10.             return layer.msg(res.msg);
  11.         }
  12.         $('#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>');
  13.     }
  14.     ,error: function(){
  15.         //失败重传
  16.  
  17.     }
  18. });

如图,注意标注的字段
DedeCMS织梦图集Flash控件停用无法上传图片处理-云模板
第四步、打开 /dede/album_add.php 找到

  1. //生成HTML

在它上面加入

  1. //新增图集字段 huxing
  2. if(is_array($_POST['huxing']['url']))
  3. {
  4.     $huxing = "";
  5.     foreach($_POST['huxing']['url'] as $key => $val)
  6.     {
  7.         $huxing .= "{dede:img ddimg='$val' text='{$_POST['huxing']['alt'][$key]}' width='' height='' uaid='{$_POST['huxing']['uaid'][$key]}'}$val{/dede:img}\r\n";
  8.     }
  9.     if($huxing)
  10.     {
  11.         $huxing = addslashes($huxing);
  12.         $upquery = "UPDATE `$addtable` SET `huxing`='$huxing' WHERE aid='$arcID' ";
  13.         $dsql->ExecuteNoneQuery($upquery);
  14.     }
  15. }

如图,注意标注的字段
DedeCMS织梦图集Flash控件停用无法上传图片处理-云模板
第五步、打开 /dede/album_edit.php 找到

  1. //生成HTML

在它上面加入

  1. //新增图集字段 huxing
  2. $huxing = "";
  3. if(is_array($_POST['huxing']['url']))
  4. {
  5.     foreach($_POST['huxing']['url'] as $key => $val)
  6.     {
  7.         $huxing .= "{dede:img ddimg='$val' text='{$_POST['huxing']['alt'][$key]}' width='' height='' uaid='{$_POST['huxing']['uaid'][$key]}'}$val{/dede:img}\r\n";
  8.     }
  9. }
  10. $huxing = addslashes($huxing);
  11. $upquery = "UPDATE `$addtable` SET `huxing`='$huxing' WHERE aid='$id' ";
  12. $dsql->ExecuteNoneQuery($upquery);

如图,注意标注的字段
DedeCMS织梦图集Flash控件停用无法上传图片处理-云模板
第六步、内容页标签新写法参考上面,使用 layui 第一张图作为缩略图,打开 /dede/album_add.php 找到

  1. 生成文档ID

在它上面加入

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

如图,注意标注的字段
DedeCMS织梦图集Flash控件停用无法上传图片处理-云模板

下载地址

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

热销模板

Nastik - 创意企业作品展示网站WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!