Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again
Today, from the topic it is very clear that i will be showing you here the very basic usage of how we can upload the Image Uploading with jquery and preview and without any Page refresh.
The basic involves that you must be familiar with little bit of jquery and html/cfml file uploading. i am not going to use HTML 5 here, I will be working on HTML 4 and jquery to Upload the image and show the user without any Page refreshes.
There are many jquery Plugins or other Plugins which do the Uploading for you, But this is very Simple and you will love it, I bet
Now we had enough talk, let’s get down to the code now
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html" lang="en" />
$(".preview").html('<img src="images/loader.gif" alt="Uploading...."//>');
<table align="center" width="750" cellpadding="1" cellspacing="2" style="border:1px solid #F00">
<form id="cropimage" method="post" enctype="multipart/form-data" action='ajaximage.cfm'>
<table width="100%" align="center" cellpadding="2" cellspacing="0">
<tr><td align="left"><input type="file" name="uploadurlimage" style="border:1px solid #666;" id="uploadurlimage"/></td></tr>
<tr><td align="left"><input type="button" name="submitImage" id="submitImage" class="acb" value="Upload"></td></tr>
<br /><div class='preview'></div>
Now after this Code, we will be doing the serverside code as we have defined whatever we need to define in our main page
So server Side Code like this
<cfset validFormats = "image/*">
<cfif isDefined('uploadurlimage') AND uploadurlimage NEQ ''>
<cfset ifolder8 = "temp">
<cfset nifolder8 = ExpandPath("myfolder/#ifolder8#")>
<cfset TAB = Chr(9)>
<cfif NOT DirectoryExists(nifolder8)>
<cfdirectory action="create" directory="#nifolder8#" mode="777">
<cfset Path = nifolder8>
<cffile action="upload" filefield="uploadurlimage" accept="#validFormats#" destination="#Path#\" nameconflict="overwrite">
<cfset sFile = cffile.serverFile>
<cfimage action="resize" width="#form.isize#" height="" source="#Path#\#sFile#" destination="#Path#\#sFile#" overwrite="yes">
<cfimage action="write" source="#Path#\#sFile#" destination="#Path#\#sFile#" overwrite="true">
<cfoutput><img src="#Path#/#sFile#" /></cfoutput>
Now we are all done, here we have created the Uploading using jquery and coldfusion
Now let me explain you two things,
First i have used the jquery.form.js file to handle the form submission from this URL
and the little Snippet of this Code do all the functionality
$(".preview").html(''); //This is the div we have defined where we will show the uploaded file
$(".preview").html('<img src="images/loader.gif" alt="Uploading...."//>'); // This is actually called to show the progress bar, if we do not want it, we can actually remove this thing
}).submit(); // cropimage is the name of the form from where we are doing an ajaxForm submission and it does this stuff at backend, we have used the target attribute to show the uploaded or any message in the preview div class, which will show us the result. and lastly we are just doing the submission, see that is a post request.
So no more Page refreshes and Your code is complete, do whatever functionality you want to do in the server CFM page like imageResize, ImageCrop or anything.
The Stuff get it going.