dede 上传图片js

在 DedeCMS 中，图片上传功能主要通过一个核心的 JS 文件 main.js 来驱动，它依赖于一个弹出窗口选择器 select_images.js，这套机制在后台的很多地方都会用到，比如文章编辑器、图集管理、栏目图标上传等。

下面我将从以下几个方面为您详细讲解：

1. 核心文件与工作流程
2. main.js - 核心上传逻辑解析
3. select_images.js - 弹出窗口选择器解析
4. 如何在自己的页面中调用 DedeCMS 的上传功能
5. 常见问题与自定义修改

核心文件与工作流程

核心文件:

• /include/dedeajax2.js: DedeCMS 的基础 AJAX 库,用于异步操作。
• /include/main.js: 最核心的上传处理文件，包含了打开上传窗口、处理返回数据、更新表单等所有逻辑。
• /include/dialog/select_images.php: 弹出窗口的 PHP 页面,用于展示和管理服务器上的图片。
• /include/dialog/select_images.js: 控制弹出窗口行为的 JS 文件,处理图片选择和确认。

工作流程:

1. 触发: 用户在后台表单（如文章编辑页）中点击一个按钮，上传图片”或“选择图片”。
2. 调用: 这个按钮绑定了 onclick 事件，调用 main.js 中的 ShowImg(iurl, formname, imgname, textareaid, size, etc) 函数。
3. 弹窗: ShowImg 函数会打开一个由 select_images.php 生成的模态对话框。
4. 操作: 用户在弹窗中进行两种操作：
   • 上传新图片: 点击上传按钮，通过 form 提交到 ../media_add.php,处理完后再刷新弹窗列表。
   • 选择已有图片: 在列表中点击一张图片，该图片会被“选中”（通常会有高亮效果）。
5. 确认: 点击弹窗底部的“确定”按钮。
6. 回调: select_images.js 会获取选中图片的路径，并将其作为参数回传给最初调用的 ShowImg 函数。
7. 更新: ShowImg 函数接收到图片路径后，会根据传入的参数（如表单名、图片域ID等）,将路径自动填充到对应的表单字段中。
8. 关闭: 关闭弹窗,流程结束。

main.js - 核心上传逻辑解析

这是您问题的核心，我们来看 main.js 中最关键的函数 ShowImg。

main.js 中的 ShowImg 函数

// 参数说明：
// iurl: 弹窗的地址，通常是 '../dialog/select_images.php?...
// formname: 包含图片路径输入框的表单的 name 属性
// imgname: 图片路径输入框的 name 属性
// textareaid: 如果需要同时将图片插入到编辑器，这里是编辑器 textarea 的 id
// etc: 其他参数，如图片大小限制等
function ShowImg(iurl, formname, imgname, textareaid, etc)
{
    var pos = GetPos();
    var width = 800;
    var height = 600;
    // 打开模态对话框
    // openWindow 是一个通用的弹窗函数，通常定义在 dedeajax2.js 中
    // 它会创建一个 iframe 来加载 select_images.php 页面
    openWindow(iurl, width, height, pos.left, pos.top);
    // 将参数保存到全局变量，供弹窗关闭后的回调函数使用
    // 这是一个非常重要的设计，因为弹窗是异步的
    imgFormName = formname;
    imgImgName = imgname;
    imgTextareaId = textareaid;
    imgEtc = etc;
}

关键点解析:

• 异步回调: ShowImg 函数本身不直接处理数据，它只是打开一个窗口，并把一些关键信息（formname, imgname 等）存到全局变量（如 imgFormName）里，当弹窗关闭时，另一个函数（通常是 onCloseDialog）会读取这些全局变量,并执行填充表单的操作。
• 参数传递: 这个函数设计得非常巧妙，通过参数可以灵活地控制上传行为：
  • formname 和 imgname: 精准定位到需要填充图片路径的表单和输入框。formname='form1', imgname='picname'，就会去更新 document.form1.picname.value。
  • textareaid: 如果这个参数不为空，函数还会调用编辑器（如 FCKeditor 或 KindEditor）的 API,将图片插入到光标位置。
  • iurl: 可以通过这个参数传递额外的限制条件，&channeltype=-5 可以只显示图集类型的图片。

select_images.js - 弹出窗口选择器解析

这个文件负责弹窗内的交互。

select_images.js 中的关键函数

// 假设这是弹窗中“确定”按钮的点击事件处理函数
function ImageSelectOk()
{
    // 获取所有被选中的图片的复选框
    // 通常每张图片旁边都有一个 checkbox
    var trs = document.getElementsByTagName("tr");
    var ids = "";
    var selimg = "";
    for(var i=0; i<trs.length; i++)
    {
        // 检查行内是否有选中的复选框
        if (trs[i].className == "head" || trs[i].className == "list") continue;
        var inputs = trs[i].getElementsByTagName("input");
        for(var j=0; j<inputs.length; j++)
        {
            // 找到 type="checkbox" 且被选中的元素
            if (inputs[j].type == 'checkbox' && inputs[j].checked)
            {
                // 获取图片路径，通常存储在 data 属性或某个隐藏的 input 中
                // imgpath_1, imgpath_2 ...
                var imgpath = inputs[j].getAttribute("data-imgpath") || document.getElementById("imgpath_"+inputs[j].value).value;
                selimg = imgpath;
                break; // 假设一次只能选一张
            }
        }
    }
    if(selimg == "")
    {
        alert("请选择一个图片！");
        return;
    }
    // --- 核心回传步骤 ---
    // 调用父窗口（即原始页面）中的函数
    // parent 是 JS 的关键字，指向打开当前窗口的窗口
    // 这里调用了 main.js 中定义的另一个全局函数
    parent.onCloseDialog(selimg);
    // 关闭当前弹窗
    window.close();
}

关键点解析:

• parent 对象: 这是实现跨窗口通信的关键。select_images.js 运行在弹窗（iframe）中，而 main.js 运行在父窗口，通过 parent，弹窗可以访问和调用父窗口的 JS 函数和变量。
• onCloseDialog: 这个函数通常在 main.js 或 dedeajax2.js 中定义，它负责接收从弹窗传回的图片路径,并执行最终的填充操作。

如何在自己的页面中调用 DedeCMS 的上传功能

假设你自定义了一个后台页面，想在里面也使用 DedeCMS 原生的图片上传功能。

步骤 1: 准备你的 HTML 表单

<form name="myform" action="save.php" method="post">
    <input type="hidden" name="picurl" value="" /> <!-- 用于存放图片路径 -->
    <input type="text" name="title" placeholder="请输入标题" />
    <!-- 上传按钮 -->
    <input type="button" name="selectpic" value="选择图片" onclick="SelectImage();" />
    <!-- 可选：显示上传后的图片预览 -->
    <img id="preview" src="" style="max-width: 200px; display: none;" />
</form>

步骤 2: 编写调用 JS

在你的页面底部，引入 DedeCMS 的核心 JS 文件,并编写你的调用函数。

<!-- 引入 DedeCMS 的 JS 库 -->
<script type="text/javascript" src="/include/dedeajax2.js"></script>
<script type="text/javascript" src="/include/main.js"></script>
<script type="text/javascript">
    // 定义自己的调用函数
    function SelectImage()
    {
        // 调用 main.js 中的 ShowImg 函数
        // 参数解释：
        // '../dialog/select_images.php': 弹窗地址
        // 'myform': 我的表单 name
        // 'picurl': 我的图片路径输入框 name
        // '': 没有编辑器，所以为空
        ShowImg('../dialog/select_images.php?fid=myform&imgmaxwidth=600&imgmaxheight=400', 'myform', 'picurl', '');
    }
    // 必须定义这个全局函数，供 select_images.js 回调
    // 这个函数会在用户点击弹窗的“确定”按钮后被调用
    function onCloseDialog(url)
    {
        // url 就是从弹窗传回的图片路径，如 "/uploads/202510/abc.jpg"
        // 将 url 填充到我们表单的 picurl 字段中
        document.myform.picurl.value = url;
        // 可选：显示图片预览
        var preview = document.getElementById('preview');
        preview.src = url;
        preview.style.display = 'block';
    }
</script>

注意: select_images.php 后面可以跟很多参数，如 &f=<?php echo $formname?>&imgmaxwidth=600&imgmaxheight=400，这些参数在 select_images.php 中会被解析,用来控制弹窗的行为。

常见问题与自定义修改

问题 1: 上传后，图片路径没有填入表单。

• 检查点 1: onclick 事件调用的函数名和参数是否正确？特别是 formname 和 imgname 是否和你的 HTML 中的 name 属性完全一致。
• 检查点 2: 你的页面是否正确引入了 dedeajax2.js 和 main.js？
• 检查点 3: 是否定义了 onCloseDialog(url) 这个全局回调函数？

问题 2: 我想修改上传弹窗的标题或默认大小。

• 修改 main.js 中的 ShowImg 函数，找到 var width = 800; var height = 600; 这两行,直接修改数值即可。
• 修改弹窗标题需要找到 openWindow 函数的实现（通常在 dedeajax2.js），或者在 select_images.php 中设置 document.title。

问题 3: 我想禁用掉“同时插入编辑器”的功能。

• 在调用 ShowImg 时，将 textareaid 参数设置为空字符串 即可。ShowImg(url, 'form1', 'picname', '')。

自定义修改示例: 假设你想在 select_images.php 的弹窗中增加一个自定义的按钮，调用我的函数”。

1. 修改 include/dialog/select_images.php，在页面的底部按钮区域添加一个按钮：

   <td colspan='2' align='center'>
       <button class='btn btn-secondary' onclick="parent.callMyCustomFunction();">自定义操作</button>
       <button class='btn' onclick="ImageSelectOk();">确定</button>
       <button class='btn' onclick="window.close();">关闭</button>
   </td>

2. 在你的主页面（调用上传的页面）中，定义 callMyCustomFunction：

   function callMyCustomFunction() {
       alert('这是一个自定义函数！');
       // 你可以在这里执行任何操作
   }

3. 这样，当用户在弹窗中点击“自定义操作”按钮时，就会执行父窗口中的 callMyCustomFunction 函数。

希望这份详细的解析能帮助您完全理解 DedeCMS 的图片上传 JS 机制！