coldfusion中的图片预览页面

Question

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

但如果我想在确认页面上预览呢？

我可能会生成一个临时文件，它不是保存在数据库中，而是物理位置上的一个文件，但是如果我决定按"no“按钮，该怎么办呢？如何删除这个临时文件？

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

    <!--- 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。在返回按钮上单击事件。

Answer 1

这是我的方法，你可以用它作为你想要的。

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

这是你的密码。但我把它分成了两页。当然，我看不出这个页面上还发生了什么，您的表单也在处理一些东西，所以我们将从您给我们的内容开始。

<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或主键)，则需要传递一个文件名。

因此，我从AdobeCold聚变文档中提取了这个方便的脚本，我将使用这个脚本将您的文件名转换为“其他东西”;)

<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>

Answer 2

这是对亚当·卡梅伦的评论的回应。它演示了两个提交按钮可能发生的一些可能的意外结果。从这段代码开始。

<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键时提交表单的场合。如果您在文本框中使用curser并按Enter键，您希望看到这个表单会看到什么？试试看你是不是对的。