Photoshop CEP面板开发求助：实现JSON文件及图片文件夹路径选择

阿华AIGC实验室

2026-5-14

嘿，我正好折腾过好几个Photoshop CEP面板，这个需求太典型了！你说的没错，标准JSX的文件选择思路和CEP的HTML/JS完全不一样，我给你一步步拆解靠谱的实现方法，避开那些权限坑。

核心方案：用CEP原生文件对话框API

直接用HTML的<input type="file">会遇到CEP沙箱权限问题，而且没法直接选择文件夹，所以优先用Adobe提供的cep.fs模块里的对话框API，它能完美和Photoshop集成，还能避免权限报错。

第一步：准备基础结构

首先，你的HTML页面里必须引入CEP的核心库CSInterface.js，这个文件在CEP SDK里，或者你可以直接从面板模板里获取：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>路径选择面板</title>
  <!-- 引入CEP核心库 -->
  <script src="./CSInterface.js"></script>
</head>
<body>
  <!-- 路径选择按钮和显示区域 -->
  <div style="margin: 20px;">
    <button onclick="selectJsonFile()">选择JSON数据文件</button>
    <p>已选JSON路径：<span id="json-path" style="color: #0078D7;">未选择</span></p>
  </div>
  <div style="margin: 20px;">
    <button onclick="selectImageFolder()">选择图片所在文件夹</button>
    <p>已选图片文件夹路径：<span id="image-folder-path" style="color: #0078D7;">未选择</span></p>
  </div>

  <script>
    // 初始化CSInterface实例
    const csInterface = new CSInterface();

    // 选择JSON文件的函数
    async function selectJsonFile() {
      try {
        const result = await new Promise((resolve, reject) => {
          cep.fs.showOpenDialog(
            false, // 不允许多选文件
            "请选择JSON数据文件", // 对话框标题
            "", // 初始打开路径，留空则用上次的路径
            [["JSON文件", "*.json"]], // 文件过滤规则，只显示JSON
            (data) => {
              if (data.err === 0) {
                // 成功选中，返回第一个文件路径
                resolve(data.data[0]);
              } else {
                reject(new Error("未选择文件或选择失败"));
              }
            }
          );
        });
        // 更新页面显示路径
        document.getElementById("json-path").textContent = result;
        // 这里可以把路径存在变量里，供后续脚本使用
        window.selectedJsonPath = result;
      } catch (err) {
        alert(err.message);
      }
    }

    // 选择图片文件夹的函数
    async function selectImageFolder() {
      try {
        const result = await new Promise((resolve, reject) => {
          cep.fs.showOpenDialog(
            false, // 不允许多选文件夹
            "请选择图片所在文件夹",
            "",
            [], // 文件夹选择不需要过滤规则，留空
            (data) => {
              if (data.err === 0) {
                resolve(data.data[0]);
              } else {
                reject(new Error("未选择文件夹或选择失败"));
              }
            },
            true // 关键参数：允许选择文件夹
          );
        });
        // 更新页面显示路径
        document.getElementById("image-folder-path").textContent = result;
        // 存起来供后续使用
        window.selectedImageFolder = result;
      } catch (err) {
        alert(err.message);
      }
    }
  </script>
</body>
</html>

第二步：配置面板权限

别忘了在你的面板manifest.xml文件里添加文件系统访问权限，否则会报错！找到Extension节点，添加以下配置：

<Permission>FileSystem</Permission>
<HostList>
  <Host Name="PHSP" Version="*"/> <!-- Photoshop 版本通配 -->
  <Host Name="PHXS" Version="*"/> <!-- Photoshop CC 版本通配 -->
</HostList>

第三步：把路径传给JSX脚本

如果需要把选中的路径传给JSX执行，可以用csInterface.evalScript()方法，比如你有一个JSX函数processData(jsonPath, imageFolder)，可以这样调用：

// 假设你已经选中了路径，调用JSX脚本
function runScript() {
  if (!window.selectedJsonPath || !window.selectedImageFolder) {
    alert("请先选择JSON文件和图片文件夹！");
    return;
  }
  // 把路径转成JSX能识别的格式（注意转义引号）
  const jsxCode = `processData("${window.selectedJsonPath.replace(/"/g, '\\"')}", "${window.selectedImageFolder.replace(/"/g, '\\"')}")`;
  csInterface.evalScript(jsxCode, (result) => {
    if (result === "undefined") {
      alert("脚本执行成功！");
    } else {
      alert(`脚本执行出错：${result}`);
    }
  });
}