用于 Redactor 编辑器的图像上传 cfm 或 cfc答案

【问题标题】：Image upload cfm or cfc for Redactor editor用于 Redactor 编辑器的图像上传 cfm 或 cfc
【发布时间】：2016-01-30 04:06:30
【问题描述】：

我正在尝试使用简单的图像上传脚本为 ColdFusion 配置编辑器。该图像实际上并未上传到服务器，我不知道如何将变量返回到 ColdFusion 以供编辑器使用。我似乎无法将 their sample code 正确转换为 ColdFusion 。

我对函数的调用在这里：

this.article_content.redactor({ focus: true,
                        buttons: [  'html', '|', 'formatting', '|', 'bold', 'italic', 'underline', '|', 'unorderedlist', 'orderedlist', '|',
                                'image', 'video', 'file', 'link', '|',
                                'fontcolor', '|', 'alignment', '|', 'horizontalrule', 'alignleft', 'aligncenter', 'alignright', 'justify'],
                        imageUpload: 'lib/modules/imageUpload.cfm'
                    });

imageUpload.cfm

<cfparam name="form.file" default="">
<cffile action="upload" destination="#dir#"  accept="image/*"  nameconflict="overwrite" filefield="file"/>
<cfset result = structnew()>
<cfset result["name"] = cffile.serverFile>
<cfset result["url"] = cffile.serverFile>
<cfset result["filelink"] = cffile.serverFile>
<cfset result["type"] = cffile.ContentType &"/"& cffile.ContentSubType>
<cfset result["size"] = cffile.FileSize>

<cfreturn serializejson(result)>

这应该是 cfm 页面还是 cfc 页面？我基本上只需要将 serverFile 变量转换为如下所示的 json 对象：

{ "url": "/images/img.jpg", "id": "123" }

【问题讨论】：

调用这个函数会发生什么？
你忘了问一个问题。什么不适合你？你在用cffile action="upload"吗？你的imageUpload.cfm 是什么样的？
抱歉不清楚。已编辑问题以包含我的 imageUpload.cfm 代码。该图像实际上并没有上传到服务器，我不知道如何将变量返回到冷融合以供编辑器使用。谢谢。
我通过阅读这个问题了解到 redactor 的存在，所以我不知道它是如何工作的。但是，代码似乎正在创建一个 html 表单。但是，我不希望在用户选择图像并提交该表单之前上传图像。
Redactor 的文件名为“file”，id 为“redactor_file”。我想我只需要编写一个 cfm 或 cfc 将 json 变量返回给 redactor 以供使用（如他们的示例所示）

标签： jquery coldfusion redactor

【解决方案1】：

我认为你非常接近！这应该可以为您解决问题：

<cfsetting enablecfoutputonly="true">
<!---
Your location to upload files to
Ideally this would be outside the webroot so you can upload the file, check 
to ensure it's not malicious, then move it to a publicly accessible location
--->
<cfset relativePath = "uploads/">
<cfset dir = expandPath(relativePath)>

<cfset result = {}>

<cfif structKeyExists(form, "file")>

    <cffile action="upload" destination="#dir#" accept="image/*"  nameconflict="overwrite" filefield="file">

    <cfset result["name"] = cffile.serverFile>
    <cfset result["url"] = relativePath&cffile.serverFile>
    <cfset result["filelink"] = cffile.serverFile>
    <cfset result["type"] = cffile.ContentType&"/"&cffile.ContentSubType>
    <cfset result["size"] = cffile.FileSize>

<cfelse>
    <cfset result["error"] = "no file uploaded">
</cfif>

<cfheader name="Content-Type" value="application/json">
<cfoutput>#serializejson(result)#</cfoutput>
<cfsetting enablecfoutputonly="false">

主要区别在于，对于 .cfm 页面，您可以只输出 JSON，而您尝试返回它（使用 cfreturn），这是您从函数中所做的。

为了更好地衡量，我添加了enablecfoutputonly 设置，以确保您不会得到任何会破坏 JSON 响应的不需要的空格。

【讨论】：

【解决方案2】：

您可以尝试添加内容类型为application/json 的cfheader。正如@beloitdavisja 建议的那样，将cfreturn 替换为cfoutput。除非您在函数内部，否则不要在 cfm 页面中使用 cfreturn。像这样：

<cfheader name="Content-Type" value="application/json">
<cfoutput>#serializejson(result)#</cfoutput>

【讨论】：