dede自定义字段如何上传PDF文件？

核心思路

1. 后台创建自定义字段：在后台为需要添加PDF上传功能的模型（例如文章模型、产品模型等）添加一个新的字段。
2. 设置字段类型和参数：将字段类型设置为“多媒体”，并正确配置其参数,使其只接受PDF文件。
3. 修改前台模板：在前台内容发布/修改页面,将默认的文本输入框替换成一个更友好的文件上传按钮和预览区域。
4. 调用和显示：在前台列表页和内容页,通过调用这个自定义字段来显示PDF的下载链接或预览图。

第一步：在后台创建自定义字段

1. 登录后台：使用管理员账号登录您的DedeCMS后台。

   
   （图片来源网络，侵删）

2. 进入模型管理：

   • 在顶部菜单栏，找到并点击【核心】。
   • 在下拉菜单中，选择【内容模型管理】。

3. 选择并编辑模型：

   • 您会看到系统内置的模型，如“文章”、“图集”等，点击您需要添加PDF上传功能的模型后面的【管理字段】或【字段管理】。
   • 我们要为“文章”模型添加，就点击【文章】后面的【字段管理】。

4. 添加新字段：

   在字段管理页面，点击左上角的【添加新字段】按钮。

   
   （图片来源网络，侵删）

5. 填写字段信息（关键步骤）：

   • 字段名称：填写一个英文名，不能包含特殊符号和空格，pdf_file,这个名字在模板调用时需要用到。
   • 字段提示文字：填写一个对用户友好的提示，附件PDF,这个文字会显示在前台发布页面的输入框旁边。
   • 字段类型：这是最关键的一步！ 请选择 多媒体。

6. 设置字段参数（关键步骤）：

   • 在下方的“字段参数”区域，进行如下设置：
     • 默认值：留空即可。
     • 最大长度：可以设置一个较大的值，255。
     • 表单提示文字：可以再次填写或留空，与“字段提示文字”类似。
     • 是否为空：根据您的需求选择，通常选“是”,允许用户不上传。
     • 显示顺序：设置这个字段在表单中的显示位置。
     • 【重要】上传目录：指定一个上传目录，uploads/pdf/,方便管理文件。
     • 【重要】文件保存类型：选择 按目录日期，这样文件会按年月自动存放,避免单个目录下文件过多。
     • 【重要】上传格式：在这里输入 pdf，这样系统就只允许用户上传PDF格式的文件，如果允许多种格式，可以用逗号隔开，如 pdf,doc,docx。
     • 最大文件大小：根据您的服务器限制和需求设置，2048（单位是KB，即2MB）。
     • 显示方式：选择 input。

7. 保存字段：

   检查所有设置无误后，点击底部的【保存】按钮。

   
   （图片来源网络，侵删）

后台的自定义字段已经设置好了，您可以去“添加文档”的页面，应该能看到新添加的“附件PDF”字段,但它显示的是一个很简单的文本输入框。

第二步：修改前台模板

为了让用户能方便地上传文件，我们需要修改模板,将文本框替换成一个美观的上传按钮。

1. 找到模板文件：

   • 进入后台的【模板】->【默认模板管理】。
   • 找到您正在使用的模板，然后进入【内容模板管理】。
   • 找到并点击【article_add.htm】（用于添加新文章）和【article_edit.htm】（用于修改文章）这两个文件。
   • 重要提示：如果您使用的是自定义的模型，文件名可能不同，product_add.htm,请务必找到对应的文件。

2. 编辑模板代码：

   • 在 article_add.htm 文件中，找到您刚刚添加的字段 pdf_file，它可能看起来像这样：

     <input type='text' name='pdf_file' id='pdf_file' value='' class='alltxt' style='width:300px' />

   • 删除或注释掉这行代码。
   • 替换成以下代码：

     <div class="dede_uploads">
         <input type="text" name="pdf_file" id="pdf_file" value="" style="width:300px" />
         <input type="button" name="selectbtn" id="selectbtn" value="选择PDF文件" class="coolbg np" />
     </div>
     <script type="text/javascript">
         $(function(){
             $('#selectbtn').click(function(){
                 var formname = 'form1'; //表单名
                 var fieldname = 'pdf_file'; //字段名
                 var sitepath = '{dede:global name='cfg_cmspath'/}'; //站点路径
                 var flash = '/static/web/js/swfupload/swfupload.swf'; //flash路径
                 var upurl = "{dede:field name='phpurl'/}/media_add.php"; //上传程序路径
                 var filetype = "*.pdf"; //文件类型
                 var title = '选择PDF文件'; //对话框标题
                 var ext = 'pdf'; //扩展名
                 var userlist = '';
                 OpenUpn(formname, fieldname, sitepath, flash, upurl, filetype, title, ext, userlist);
             });
         });
     </script>

     • 代码说明：
       • 这段代码引入了DedeCMS内置的swfupload上传组件。
       • fieldname 变量必须和您在第一步中设置的“字段名称”一致。
       • filetype 和 ext 都设置为 pdf,确保只上传PDF。
       • upurl 是上传处理程序,通常无需修改。

3. 保存模板：

   • 保存对 article_add.htm 的修改。
   • 如果您也希望在修改文章页面也能上传，请用同样的方法修改 article_edit.htm 文件。

去前台“添加文档”页面刷新一下，您应该能看到一个漂亮的“选择PDF文件”按钮了，点击它，会弹出一个文件选择窗口，选择PDF后,文件地址会自动填入文本框。

第三步：在前台调用和显示PDF

最后一步,我们需要在前台列表页和内容页显示这个PDF文件。

在列表页（如 list_article.htm）中显示

如果您想在列表摘要中显示是否有PDF附件,可以使用以下代码：

[field:array runphp='yes']
    if(@me['pdf_file']){
        @me = "<span class='pdf-ico'><a href='{@me['pdf_file']}' target='_blank'>PDF附件</a></span>";
    }else{
        @me = "";
    }
[/field:array]

• 使用方法：将这段代码放在您想显示附件链接的位置,例如文章标题后面。
• 样式：您可以在CSS中为 .pdf-ico 添加样式，

  .pdf-ico {
      margin-left: 10px;
      color: #0066cc;
      font-size: 12px;
  }
  .pdf-ico a {
      text-decoration: none;
  }
  .pdf-ico a:hover {
      text-decoration: underline;
  }

页（如 article_article.htm）中显示

这是最常用的地方,通常在文章内容的末尾或侧边栏显示。

{dede:field name='pdf_file' runphp='yes'}
    if(@me){
        @me = "<div class='download-area'>
                  <h3>相关附件</h3>
                  <p><a href='".@me."' target='_blank' title='点击下载PDF文件'>
                    <i class='icon-file-pdf'></i> 下载本文PDF版
                  </a></p>
               </div>";
    }else{
        @me = "";
    }
{/dede:field}

• 使用方法：将这段代码放在内容页模板的合适位置，{dede:field.body/} 标签的后面。
• 图标：代码中的 <i class='icon-file-pdf'></i> 是一个图标，您需要引入一个图标库（如Font Awesome）或者直接用文字代替，可以直接写成 <strong>[PDF]</strong>。

总结与排错

• 权限问题：确保 uploads 目录及其子目录（如 uploads/pdf/）的权限设置为 755 或 777,以确保文件能正常上传。
• 刷新缓存：每一步修改（后台字段、前台模板）后，都建议去后台的【系统】->【一键更新缓存】中更新一下缓存。
• 前台不显示：检查模板调用代码中的字段名 pdf_file 是否和后台设置的字段名完全一致,包括大小写。
• 上传失败：检查服务器上传文件大小的限制（php.ini 中的 upload_max_filesize 和 post_max_size），以及是否开启了必要的PHP扩展（如 fileinfo）。

按照以上步骤操作,您就可以成功地在DedeCMS中为自定义字段添加并使用PDF上传功能了。