This post is about adding advanced functionality to your file upload page using slightly unusual technique. To be precise, allow users to upload a file without reloading the page. There were various takes on this and mainly for the same reasons all the time – to achieve the same visual experience as already done long time ago using php. I have searched through various forums and blogs for the different attempts and approaches and finally came up with this ‘joined’ solution. I am not claiming it to be revolutionary etc. Neither stating it hasn’t been done before. From all the research I have done however, I did not find anyone attempting to do it this particular way hence the following tutorial to make someone’s life slightly easier.

This tutorial will involve creating a file upload form with an iframe inside. With some help of jQuery it will allow you to upload the file returning its name for further operations.

So let’s start with the index page and create a little form which will later enable us to upload the file:

index.cfm

To show that form is executing and user has nothing to worry about is always a good practice to include a loading image. http://www.preloaders.net is just a place you need as you will be able to choose not only the design, but colour scheme too.

Noticed in the first table row we have included an iframe. So let’s move to the fileUpload.cfm page, which is the content of this ‘secret’ iframe.

fileUpload.cfm

So essentially at this stage we are done with the ColdFusion and HTML code and ready to move on to JavaScript section. First of all we have to include jQuery within thetags in your index.cfm file. Once done the following javascript code needs to be placed just before the closing tag.

And the whole code for the index.cfm would look like this:

index.cfm

And we are done. An example of the above working code can be found in our main site’s ‘get a quote’ section. You will be able to see there how it looks once styled ‘right’. Should there be any questions feel more than welcome to use the comment section below or contact me directly at blog@kartogram.co.uk.

Regards,

SD