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

概述我们知道由于Flash控件与2020年停用，导致DedeCMS织梦图集无法上传图片，虽然flash已经退出舞台了，而织梦的图集上传功能仍然使用的是flash控件，目前不仅

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

整合教程

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

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

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

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

/dede/templets/album_add.htm

/dede/templets/album_edit.htm

/dede/album_add.PHP

/dede/album_edit.PHP

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

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

二开教程

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

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

<tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

</tr>

</table>

</td>

</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('<li ><div ><i ></i><i ></i><i data-ID="' + res.ID + '"></i></div><img src="' + res.img + '" ><input type="text" name="imgurls[alt][]" value="" /><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 找到

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

<tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

</tr>

</table>

</td>

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

}

,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 找到

//加入附加表

在它上面加入

//图集字段 imgurls

if(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}rn";

}

$imgurls .= addslashes($my_imgurls);

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

//更新附加表

在它上面加入

//图集字段 imgurls

if(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}rn";

}

$imgurls .= addslashes($my_imgurls);

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

<ul>

{dede:imageList}

<li>

<p>[fIEld:text/]</p>

</li>

{/dede:imageList}

</ul>

<ul>

{dede:imageList fIEld="huxing"}

<li>

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

<tr>

<td>

<i ></i>上传图片

</button>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

<td>

<div >

</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 ><div ><i ></i><i ></i><i data-ID="' + res.ID + '"></i></div><img src="' + res.img + '" ><input type="text" name="huxing[alt][]" value="" /><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>

<tr>

<td>

<i ></i>上传图片

</button>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

<td>

<div >

<?PHP

if($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 ><div ><i ></i><i ></i><i data-ID="{$uaID}"></i></div><img src="{$bigimg}" ><input type="text" name="huxing[alt][]" value="{$text}" /><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);

}

,error: function(){

//失败重传

}

});

如图，注意标注的字段

第四步、打开 /dede/album_add.PHP 找到

//生成HTML

在它上面加入

//新增图集字段 huxing

if(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}rn";

}

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}rn";

}

$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];

}

如图，注意标注的字段

服务范围

1、专业提供wordpress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服

2、本站承接 wordpress、Dedecms、ThinkPHP 等系统建站、仿站、开发、定制等服务

3、英文模板（主题）安装费用为120元/次，汉化主题首次免费安装（二次安装30元/次）

售后时间

周一至周五（法定节假日除外） 10:00-22:00

查看演示

咨询汉化

此链接为英文原版演示地址，由于英文演示针对的是境外用户，机房位于境外国内访问可能比较缓慢如果长时间未显示可以尝试刷新几次。

专业提供wordpress主题安装、深度汉化、加速优化等服务，详询在线客服！

总结

以上是内存溢出为你收集整理的DedeCMS织梦图集Flash控件停用无法上传图片处理全部内容，希望文章能够帮你解决DedeCMS织梦图集Flash控件停用无法上传图片处理所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/998108.html

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

发表评论

评论列表（0条）