Question

我知道如何将图像文件上传到服务器并将图像文件显示到页面。

但是，如果我想在确认页面上进行预览会怎么样？

我可能会生成一个未保存在数据库中的临时文件，但它是一个物理位置的文件，但如果我决定点击＆＃34; no＆＃34;按钮。如何删除此临时文件？

下面的代码会缩小图像并在页面上显示。但它也会在目录中创建一个图像，在我点击OK或NO之后会保留在那里。 NO是按钮，而OK自然是提交。

    <!--- Make Temp Image as Preview --->
    <cfset mediapath = expandpath('../images/about')>
    <cfif structKeyExists(form,"image") and len(form.image)>
       <cffile action="upload"
       filefield="image"
       destination="#MediaPath#"
       nameconflict="makeunique">

       <cfimage name="uploadedImage"
       source="#MediaPath#/#file.serverFile#" >
       <cfset imagesize = 320>

        <cfif uploadedImage.width gt uploadedImage.height>
             <cfset percentage = (imagesize / uploadedImage.width)>
          <cfelse>
             <cfset percentage = (imagesize / uploadedImage.height)>
       </cfif>

       <cfset newWidth = round(uploadedImage.width * percentage)>
       <cfset newHeight = round(uploadedImage.height * percentage)>
      <!--- Show Image --->
    <cfoutput>

      <img src="../images/about/#file.serverFile#" style="height:#newHeight#; width:#newWidth#;">

我假设我可能需要进行URL传递或执行某种CFScript。在返回按钮Onclick事件。

Answer 1

这个答案是对Adam Cameron的评论的回应。它说明了两个提交按钮可能出现的一些潜在意外结果。从这段代码开始。

<cfdump var="#form#">
<form action="abc.cfm" method="post">
<input type="text" name="text1" />
<input type="submit" name="submit1" value="no" />
<input type="submit" name="submit2" value="yes" />
</form>

大多数（如果不是所有）浏览器的默认行为是，当用户按下回车键时，有时会提交表单。如果您在文本框中输入了光标并按Enter键，您希望在此表单中看到什么？试一试，看看你是对的。

Answer 2

以下是我的方法，将其视为您的目标。

好的，这可能比你需要的还要多，但这应该让你在这个图像删除问题的某个地方。

这是你的代码。但我把它分成两页。当然，我无法看到此页面上还有其他内容以及您的表单处理内容，因此我们将从您给我们的内容开始。

<cfset mediapath = expandpath('../images/about')>

很好地使用structKeyExists（）：）

<cfif structKeyExists(form,"image") and len(form.image)>

在这里，我会暂停并建议你限制您上传到.gif，.jpeg，.jpg，.png （您的主要图像类型），以防止上传任何和每个文件类型。我在下面添加了一个接受参数。

<cffile action="upload"
    filefield="image"
    destination="#MediaPath#"
    nameconflict="makeunique"
    accept="image/*">

<cfimage name="uploadedImage"
     source="#MediaPath#/#file.serverFile#" >

好的，上传文件可以分开关注

此时我会问他们是否要预览文件。如果他们点击“预览”，请将它们带到preview.cfm页面。

如果您没有别的东西（比如ID或某些主键），那么您需要传递一个文件名。

所以我在他们的网站上从Adobe Coldfusion文档中删除了这个方便的花花公子的脚本，我将使用它来将你的文件名变成'别的';）

<cfscript> 
theKey="123abc"; 
theKey=generateSecretKey("AES") 
superDuperSecretSoDontTell=encrypt(file.serverFile, theKey, "AES", "hex"); 
</cfscript> 

<a href="preview.cfm?fileName=#superDuperSecretSoDontTell#&theKey=#theKey#">Let's send this piggy!</a>

然后你去了预览页......

<cfoutput>

（向上）这是pageA.cfm （指向下方）这是pageB.cfm

现在我有了下面的其余代码，让我们根据传递querystring变量/值对来提取文件。

<cfscript> 
IWannaKnowTheSecret=decrypt(url.fileName, url.theKey, "AES", "hex"); 
</cfscript>

在这里，我会暂停并建议你限制您上传到.gif，.jpeg，.jpg，.png （您的主要图像类型），以防止上传任何和每个文件类型。我在下面添加了一个接受参数。

<cffile action="read" file="#MediaPath##IWannaKnowTheSecret#" variable="uploadedImage">

<cfset imagesize = 320>

这里有趣的处理。所以你正在接受两个值中较大的一个并使用它减小百分比。整齐。

<cfif uploadedImage.width GT uploadedImage.height>
    <cfset percentage = (imagesize / uploadedImage.width)>
<cfelse>
    <cfset percentage = (imagesize / uploadedImage.height)>
</cfif>

<cfset newWidth = round(uploadedImage.width * percentage)>
<cfset newHeight = round(uploadedImage.height * percentage)>

然后做一个这样的表格：

<form action="" method="post" enctype="multipart/form-data">
Your current Image: 
<cfoutput>
Name: #uploadedImage#<br>
<img src="../images/about/#uploadedImage#" style="height:#newHeight#; width:#newWidth#;">
</cfoutput> 
Do you want to remove this?<br>
<input type="checkbox"
       name="removeImage" 
       value="1" />: Remove the logo image</cfif><br />

Wnat to replace your image?<br>
<input type="file" name="replacementImage">  (

<input type="hidden" 
       name="uploadedImage" 
       value="<cfoutput>#uploadedImage#</cfoutput>">

<input type="submit" value="submit" name="submit"       
</form>

<a href="#" onclick="javascript:window.history.back(-1);return false;">Cancel and go back</a>

如果他们继续并想要修复图像或更换图像。提交然后您可以使用这样的东西。然后我们删除...

如果填充了replacementImage文件，那么我们添加该文件。

你有它......

你正在分离一些问题。您正在提供改进的选项。您允许更改或不更改。你正在给他们一个回去你想要的地方。

编辑：这是编码和解码内容的证明（如果你想玩它：

<cfscript> 
theKey="123abc"; 
theKey=generateSecretKey("AES"); 
superDuperSecretSoDontTell=encrypt("monkeytoots", theKey, "AES", "hex");  
</cfscript> 
<cfoutput><a href="?fileName=#superDuperSecretSoDontTell#&theKey=#theKey#">Let's send this piggy!</a></cfoutput>
<cfif isdefined("url.fileName") and isdefined("url.theKey")>
<cfscript> 
IWannaKnowTheSecret=decrypt(url.fileName, url.theKey, "AES", "hex"); 
</cfscript>

<cfoutput>
#IWannaKnowTheSecret#
</cfoutput>
</cfif>

coldfusion中的图片预览页面

2 个答案: