coldfusion中的圖片預覽頁面

我知道如何將圖像文件上傳到服務器並將圖像文件顯示到頁面上。coldfusion中的圖片預覽頁面

但是如果我想要在確認頁面上預覽呢？

我大概可以生成一個臨時文件，它不保存在數據庫中，但是是一個物理位置的文件，但是如果我決定點擊「否」按鈕，該怎麼辦？這個臨時文件將如何被刪除？

下面的代碼會縮小圖像並將其顯示在頁面上。但是它也會在目錄中創建一個圖像，在我點擊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事件。

來源

2014-04-07 Gakko no Ato

最明顯的答案是「用'< cffile action =「delete」>'「，根據信息量的限制，你可以得到一個好答案。你究竟在這裏問什麼？ –

」否「也是一個提交。可以在服務器端檢查按鈕被按下並執行相應的操作 –

兩個提交按鈕可能會導致意想不到的結果，我建議選擇一個或單選按鈕來代替 –

以下是我的方法將其用於你的意願。

好吧，這可能比你需要更多，但這應該讓你在這個圖像刪除問題的東西某處。

這是你的代碼。但我把它分成兩頁。當然，我不能看到這個頁面上還有什麼內容和表單處理的東西，所以我們將從你給我們的東西開始。

<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

現在我有下面的代碼的其餘部分，讓拉基於闖關查詢字符串文件變量/值對。

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

在這裏，我會停下來，建議你限制你的上傳到剛剛.GIF，.JPEG，爲.jpg，.png （你的主要類型的圖像），以防止上傳任何和everyfile類型。我在下面添加了一個接受參數。

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

來源

2014-04-07 17:38:22

這是否提供「預覽」作爲選項？我已經被告知要在加載確認頁面（這是確認頁面的代碼）時編寫這個文件以進行預覽。我必須以某種方式調用腳本，它將1.刪除圖像，然後2.將用戶轉到上一頁。 –

上傳文件後，下一頁提供了文件名，示例圖像，刪除選項以及是否要上傳新文件。您將有專門的頁面來完成預覽等多項操作。如果您還將文件名與ID一起保存到表中，則不必執行所有加密工作，則可以傳遞更簡單的ID，並且我也不知道這是公開的還是私有的加密。在文件上傳時限制文件類型。如果您還有其他問題，請告訴我。這是很多答案的代碼（發佈後我有點厭倦）。 –

第二點你不必挖掘tmp目錄文件並刪除它，除非它是絕對必需的。在某個時候，文件確實會脫落。文件所在的實際目錄....那麼，如果需要刪除文件，那麼刪除語句可以在任何需要它的地方工作。還有其他一些可以簡化的選項，比如你可以有兩個表單容器，然後用另一個表單設置另一個表單的刪除選項，然後形成表單變量來刪除文件。您可以在一個頁面上擁有兩種不同路徑和邏輯的表單。 –

這個答案是爲了迴應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，你希望用這個表單看到什麼？嘗試一下，看看你是否正確。

來源

2014-04-07 16:31:24

有趣的點。你... –

我從來沒有說過這將是兩個提交。返回按鈕是一個Href，可以轉到上一頁。 –

coldfusion中的圖片預覽頁面

回答

相關問題