Page 1 of 1

How to resize and add an image to a database Rate Topic: -----

#1 ProdicalProgrammer  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 5
  • View blog
  • Posts: 115
  • Joined: 26-June 09

Posted 08 November 2011 - 02:00 AM

Hi Guys

Small tutorial on how to re size an image with ColdFusion.

First we will create a form where you can upload the image.

Lets call it index.cfm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="1" width="500" align="center">
    <cfform action="picture_add.cfm" name="AddPic" method="post" enctype="multipart/form-data">
        <tr>
            <td align="right" class="Copy" valign="top">Photo:</td>
            <td align="left" class="Copy" valign="top">
                <cfinput type="file" name="PICTURE" required="no">
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td align="left">
                <cfinput type="submit" name="Submit" value="Submit">
            </td>
        </tr>
        </cfform>
    </table>
</body>
</html>




As you can see in our <CFFORM ></CFFORM >tags we call the page picture_add.cfm.

So when you click on submit button the picture_add.cfm page will be called.

Lets code the picture_add.cfm page.

<cfparam name="Error" default="">

<cfif Picture neq "">
    <cftry>
        <cffile 
            action="upload" 
            filefield="Picture" 
            destination="C:\ColdFusion9\wwwroot\test\images\tempupload" 
            accept="image/jpeg, image/jpg, image/pjpeg" 
            nameconflict="makeunique">

        <cfimage
            action = "info"
            source = "C:\ColdFusion9\wwwroot\test\images\tempupload\#serverfile#"
            structname = "Picturetest">
        
        <cfoutput>
            <cfset Picturewidth =  #Picturetest.width#>
            <cfset Pictureheight =  #Picturetest.height#>
            <cfset PictureSmallwidth = 150>
            <cfset PictureSmallHeight = #Pictureheight# / #Picturewidth# * #PictureSmallwidth#>
        </cfoutput>

        <cfimage action = "resize"
            height = "#Round(PictureSmallHeight)#"
            width="150"
            source = "#C:\ColdFusion9\wwwroot\test\images\tempupload\#serverfile#"
            destination = "C:\ColdFusion9\wwwroot\test\images\picturesmall\#serverfile#"
            overwrite = "yes">

    <cfcatch type="any">
        <cfset Error = "1">
    </cfcatch>
    </cftry>
</cfif>

<cfif ERROR eq 1>
    <script language="Javascript">
    alert ("Corrupt or invalid file type. .:Only jpg files accepted:.")
    </script>
        
<cfelse>
    <cfquery name="INSERTPRODUCT" datasource="yourdb">
        INSERT INTO yourname
        (PICTURE)
        VALUES
        ('#SERVERFILE#')
    </cfquery>
    <script language="Javascript">
	    alert ("Your picture has been uploaded.")
    </script>
    <cflocation url="index.cfm">
</cfif>



Ok we have now coded the picture_add.cfm page

Lets go through it step by step.

First we start off with a parameter called "Error".

Ill explain to you later what this variable does.

We then have a cfif statement.

This statement tests the picture field in the index.cfm, it sees were there is something to upload.

The second statement is there for error handling, a try statement if anything is wrong with image an error should be thrown.

Our third field is where the original picture will be uploaded it will be sent to location chosen by you.

Your accept types tell you what file extensions to accept.

Nameconflict will tell coldfusion what to do if there are two images with the same.

In the <cfimage> tag the following occurs.

The pictures get re-sized and uploaded to your specific directory.

You will need to manipulate the sizes of an image because it will look weird if the height and width is not exact.

Next there is a catch statement to catch all errors.

Remember the variable that Error we declared right in the beginning this is where we use it.

We use another if statement to test this value.

If our variable is equal to one we will use a piece of javascript code to tell the user that there is an error with the image.

We have a cfelse statement this will execute if our error = ""(nothing).

Then we have a query that will insert the picture into a database.

I hope this made sense and helped.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1