登录站点

用户名

密码

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

已有 35 次阅读  2021-04-01 19:27

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

整合教程

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

把下载得到的文件解压吗,然后找到 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>

分享 举报