dede自定义表单图片如何显示？

第一步：修改自定义表单模板 (增加上传字段)

这一步是让用户在前台能够提交图片。

1. 登录后台：进入 DedeCMS 后台。

2. 找到表单模板：

   • 在左侧菜单栏找到 【核心】 -> 模型管理】。
   • 点击 【自定义表单】。
   • 你会看到你创建的所有自定义表单列表,点击你想要修改的那个表单的 【管理】 或 【修改】 按钮。
   • 在表单管理页面,点击 【修改】 按钮，进入表单编辑页面。

3. 添加图片上传字段：

   • 在表单编辑页面,找到 “表单字段” 的设置区域。

     
     （图片来源网络，侵删）

   • 你需要添加一个文本字段来存储图片的路径,并添加一个文件上传字段供用户上传。

   • 直接在后台添加（推荐）

     • 在 “增加新字段” 部分，依次添加两个字段：

       • 字段名：imgpath (或你喜欢的名字，如 user_img)

         
         （图片来源网络，侵删）

       • 字段类型：文本(255字符)

       • 字段说明：用户图片

       • 是否显示：是

       • 前台提交框提示文字：请上传您的图片

       • 其他选项保持默认，点击 “保存”。

       • 字段名：userfile (或你喜欢的名字，如 img_upload)

       • 字段类型：文件上传

       • 字段说明：图片上传

       • 是否显示：是

       • 前台提交框提示文字：选择图片

       • 其他选项保持默认，点击 “保存”。

   • 手动修改 templets/plus/post_diyform.htm 文件

     • 如果你的表单模板是默认的,你也可以直接修改这个文件。

     • 在 <form> 标签内，你希望添加上传字段的位置，插入以下代码：

       <li>
         <label for="userfile"><strong>图片上传：</strong></label>
         <input type="file" name="userfile" id="userfile" class="intxt" style="width:300px" />
         <span class="litpic_span">支持jpg,gif,png格式，建议尺寸：800x600</span>
       </li>

4. 更新前台页面：

   • 保存表单修改后,DedeCMS 会自动生成或更新前台的表单页面（通常是 /plus/diy.php?diyid=X）。
   • 清理浏览器缓存,访问你的表单页面，现在你应该能看到一个“文件上传”的选项了。

第二步：修改处理程序 (保存图片路径)

这是最关键的一步,默认情况下，自定义表单只保存文本，我们需要修改 PHP 文件来处理上传的图片，并将其路径存入数据库。

1. 找到并打开处理文件：

   • 文件路径是：/plus/diy.php。
   • 用代码编辑器（如 VS Code, Sublime Text, Dreamweaver）打开它。

2. 修改代码：

   • 找到 $diy->save($addvar); 这一行，它就在处理完所有表单提交数据之后，跳转页面的之前。
   • 在 这行代码之前，插入以下处理图片上传的代码。

   // --- 在 $diy->save($addvar); 之前添加以下代码 ---
   // 处理文件上传
   if (!empty($_FILES['userfile']['name'])) {
       // 1. 引入文件上传类
       require_once(DEDEINC.'/uploadsafe.inc.php');
       // 2. 设置上传目录 (建议在 /uploads/ 下创建一个自定义文件夹)
       // $cfg_uploadset 是后台设置的上传目录，默认是 uploads
       $uploadDir = $cfg_uploadset . '/ diy_form_images /'; // 注意：这里的 ' diy_form_images ' 是文件夹名，可以自定义，会自动创建
       if (!is_dir($uploadDir)) {
           mkdir($uploadDir, 0777, true);
       }
       // 3. 调用文件上传处理函数
       // $file_infos 是一个数组，包含上传后的文件信息
       $file_infos = upload_file($_FILES['userfile'], $uploadDir, 'jpg|gif|png', false, 0, false, $ddmaxwidth, $ddmaxheight);
       // 4. 检查上传是否成功
       if ($file_infos[0] == 1) {
           // 上传成功，获取文件名
           $filename = $file_infos[0]; // 返回的文件名
           $filepath = $file_infos['url']; // 更推荐使用返回的完整URL路径
           // 5. 将图片路径存入 $addvar 数组，以便存入数据库
           // 这里的 'imgpath' 必须和你在第一步中创建的文本字段名完全一致
           $addvar['imgpath'] = $filepath;
       } else {
           // 上传失败，可以输出错误信息（可选）
           // showMsg('图片上传失败：' . $file_infos['msg'], '-1');
           // 如果你不想在上传失败时阻止表单提交，可以什么都不做，或者记录一个错误日志
       }
   }
   // --- 原有的代码 ---
   $diy->save($addvar);

代码解释：

• require_once(DEDEINC.'/uploadsafe.inc.php');：引入 DedeCMS 自带的、安全的文件上传处理类。
• $uploadDir：设置图片存放的目录，我们创建了一个 uploads/diy_form_images/ 文件夹来存放所有表单提交的图片，便于管理。
• upload_file()：这是 DedeCMS 的核心上传函数，它会处理文件移动、重命名、安全检查等。
• $addvar['imgpath'] = $filepath;：这是关键！它将上传成功后生成的图片路径（如 /uploads/diy_form_images/20251027_a1b2c3d4.jpg）赋值给我们之前创建的 imgpath 字段，当 $diy->save($addvar); 执行时，这个路径就会被保存到数据库中。

第三步：修改列表和详情页模板 (显示图片)

现在图片已经上传并保存了路径,我们需要在前台展示出来。

修改自定义表单列表页模板

• 找到模板文件：路径是 /templets/plus/list_diyform.htm。

• 修改循环部分：在模板文件中找到 {dede:list} 或类似的循环标签块，在需要显示图片的地方，添加 <img>

  <div class="diy-list-item">
    {dede:field.id /} <!-- ID -->
    {dede:field.name /} <!-- 假设你有一个 name 字段 -->
    <!-- 显示图片 -->
    {dede:field.imgpath runphp='yes'}
      if(@me != ''){
        @me = '<img src="' . @me . '" alt="用户上传图片" style="max-width:200px; max-height:150px; border:1px solid #ccc; margin:5px 0;" />';
      } else {
        @me = '<span style="color:#999;">暂无图片</span>';
      }
    {/dede:field.imgpath}
    <hr>
  </div>