需在Codex中嵌入自定义HTML/JS实现文件上传与预览:插入带accept属性的file输入框,添加预览容器及类型判断脚本,并必须开启“允许运行自定义JavaScript”权限,否则功能完全失效。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

要在Codex中实现用户上传文件并即时在页面上预览,需绕过Codex原生不支持前端文件操作的限制,借助HTML原生与JavaScript动态渲染完成——Codex本身不提供文件上传API或预览组件,必须在页面中嵌入自定义HTML/JS代码块。
插入文件选择控件
在Codex编辑器的任意段落位置,切换到「源码模式」(点击右上角「⋯」→「源码模式」),粘贴以下HTML代码:
这行代码创建一个标准文件选择器,【accept属性限定了可选文件类型,避免用户误选不支持预览的格式】。若漏写accept,用户可能上传.exe或.zip等无法安全预览的文件,导致后续脚本报错或空白显示。
添加预览容器与脚本
在同一源码模式下,在input下方紧接着插入以下代码块:
通过 codex-reset-radar.pages.dev 监控 Codex 使用重置窗口。轮询 current.json,检测窗口开启/关闭、预测等级变化以及概率跳变。
<script>document.getElementById('codexFileInput').onchange = function(e) { const file = e.target.files[0]; if (!file) return; const preview = document.getElementById('codexPreviewArea'); preview.innerHTML = ''; if (file.type.startsWith('image/')) { const img = document.createElement('img'); img.src = URL.createObjectURL(file); img.style.maxWidth = '100%'; img.style.height = 'auto'; preview.appendChild(img); } else if (file.type === 'application/pdf') { const embed = document.createElement('embed'); embed.src = URL.createObjectURL(file); embed.type = 'application/pdf'; embed.width = '100%'; embed.height = '500'; preview.appendChild(embed); } else if (file.type === 'text/plain') { const reader = new FileReader(); reader.onload = () => { const pre = document.createElement('pre'); pre.textContent = reader.result; pre.style.backgroundColor = '#f5f5f5'; pre.style.padding = '12px'; pre.style.borderRadius = '4px'; preview.appendChild(pre); }; reader.readAsText(file); } }; </script>
这段脚本监听文件选择事件,根据MIME类型自动匹配渲染方式:图片用、PDF用
启用执行权限(关键步骤)
保存源码后,Codex默认会禁用内联脚本执行。必须手动开启:
① 点击页面右上角「设置」齿轮图标 →「页面设置」→「高级」
② 找到「允许运行自定义JavaScript」选项 → 开启开关
③ 刷新页面
这一步不可跳过。关闭状态下,所有<script>标签内容被完全忽略,上传后无任何反应。<strong>【若未开启该选项,即使HTML和JS语法完全正确,预览功能也绝对无法触发】</script>

















