在织梦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';

