Upload the File Using jquery & coldfusion and Preview It :)

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

So here is the code for the Basic page. This is quite simple as you will see that i have just added a simple upload button and we are doing the page processing, Now here is an update you can even add the javascript to this page to detect if user is uploading any other file rather than image file. you can add even more functions whatever you like like check javascript image size and others, That are all long things, you can do, so we start with Basic Info

<!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" lang="en" />
                      <script language="javascript" src="s_js/jquery.min.js"></script>
                      <script language="javascript" src="s_js/jquery.form.js"></script>
                      <script language="javascript">
                      $(document).ready(function() {
                      	$('#submitImage').bind('click', function(){
                        		$(".preview").html('');
                      		$(".preview").html('<img src="images/loader.gif" alt="Uploading...."//>');
                      		$("#cropimage").ajaxForm({
                      		target: '.preview'
                      		}).submit();
                      	});
                      });
                      </script>
                      </head>
                      <body>
                      <table align="center" width="750" cellpadding="1" cellspacing="2" style="border:1px solid #F00">
                      <tr>
                      <td colspan="2">
                      <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>
                      </table>
                      <br /><div class='preview'></div>
                      </form></td>
                      </tr>
                      </table>
                      </body>
                      </html>

Open in new window

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">
                      		</cfif>
                      	<cfset Path = nifolder8>
                      </cfif>
                      <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>

Open in new window

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

Jquery Form

and the little Snippet of this Code do all the functionality

$(document).ready(function() {
                      $('#submitImage').bind('click', function(){
                      $(".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
                      $("#cropimage").ajaxForm({
                      target: '.preview'
                      }).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.
                      });
                      });

Open in new window

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.

Cheers

Upload the File Using jquery & coldfusion and Preview It :)

Comments (0)