在织梦CMS(DedeCMS)中添加多图上传功能,主要需要修改后台模板文件、调用系统自带的多图上传插件,并结合数据库字段配置来实现,以下是具体操作步骤和注意事项:

数据库字段准备
首先需要在对应的数据表(如dede_addonarticle
)中添加一个字段用于存储多图路径,建议使用TEXT
类型,以支持存储多个图片路径,可以通过phpMyAdmin或织梦后台的“系统SQL命令行工具”执行以下SQL语句:
ALTER TABLE `dede_addonarticle` ADD `pics` TEXT NOT NULL DEFAULT '';
执行后,确保字段名与后续模板调用中的变量名一致。
修改后台模板文件
- 定位模板文件:进入织梦后台目录
/dede/
,找到对应的内容编辑模板,例如文章编辑模板article_edit.htm
或添加文章模板article_add.htm
。 - 添加多图上传按钮:在需要显示多图上传的位置插入以下代码:
<table width="100%" border="0" cellpadding="1" cellspacing="1" class="dbox"> <tr> <td class="bline" width="120" align="center">多图上传:</td> <td class="bline"> <input type="button" name="imageUp" value="上传图片" style="width:100px;" onclick="ShowImg('form1pics','small')"/> <input type="text" name="pics" id="pics" value="" style="width:300px;" /> <input type="button" name="setCover" value="设为封面" onclick="SetCoverPic()" style="display:none;" id="btnSetCover" /> </td> </tr> <tr> <td colspan="2" id="picPreview" style="padding:5px;"></td> </tr> </table>
- 引入JS文件:在模板头部确保引入了织梦的多图上传JS文件:
<script language="javascript" src="js/main.js"></script> <script language="javascript" src="js/picup.js"></script>
调用多图上传插件
织梦自带的多图上传功能通过picup.js
实现,需确保JS文件路径正确,点击“上传图片”按钮后,会弹出上传窗口,支持批量选择图片,上传成功后,图片路径会自动填充到pics
文本框中,格式为图片路径1|图片路径2|...
。
前台调用多图
在前台模板中,通过循环调用pics
字段显示多图。

{dede:field name='pics' runphp='yes'} $pics = explode('|', @me); $result = ''; foreach($pics as $pic){ if($pic != ''){ $result .= "<img src='".$pic."' width='100' height='100' style='margin:5px;' />"; } } @me = $result; {/dede:field}
注意事项
- 权限设置:确保
/uploads/
目录及其子目录具有可写权限(755或777)。 - 路径问题:若图片无法显示,检查
cfg_cmspath
和cfg_multi_site
配置,确保路径正确。 - 封面图设置:可通过
SetCoverPic()
函数将某张图片设为封面,需在JS中绑定事件。
相关问答FAQs
Q1:多图上传后前台显示乱码怎么办?
A1:可能是编码问题,确保数据库、模板文件、HTML页面均使用UTF-8编码,并在config.php
中设置'cfg_soft_lang' => 'utf-8'
,若仍乱码,检查pics
字段存储的路径是否包含特殊字符。
Q2:如何限制上传图片的数量或大小?
A2:在include/ckeditor/ckeditor.config.js
中配置filebrowserUploadUrl
参数,或修改picup.js
中的maxFileSize
和fileListLimit
属性,限制单张图片不超过2MB、最多上传10张:
config.filebrowserUploadUrl = 'dede/uploadsafe.php?op=upload&dtype=image&maxsize=2097152&limit=10';
