jquery - Using Valums AjaxUpload with a CFC -

I was looking for a great way to upload images ajax style;

Here's the page (do not forget your DTD):

   & Lt; Script src = "script / jquery-1.4.2.min.js" type = "text / javascript" & gt; & Lt; / Script & gt; & Lt; Script src = "script / ajaxupload.js" type = "text / javascript" & gt; & Lt; / Script & gt; & Lt; Title & gt; AJAX Upload Test & lt; / Title & gt; & Lt; Script type = "text / javascript" & gt; $ (Document) .ready (function () {// start the document function // // the fire up is Valum AjaxUpload new AjaxUpload ('upload_button', {// I put the method since I am using a cfc Returned string in the given and return format so that the CF returns the JSN action: 'cfc / engine.cfc? Method = uploadimage and returnFormat = json', // default name ... name: 'userfile', // us in the return response Tell Json to expect: 'Json', // When it is uploaded, we preview it with that file Do not do what we uploaded: function (file, response) {$ ('img # preview'). Attr ('src', response.PREVIEW); // Use this console.log to see if CFC Jason data Returning, the same way that it has its own production server console. Log (response);}}); // end the document;); & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt ;! - Any invisible form of the essentially required form of plug-in whatever you want ... - & gt; & Lt; Div id = "upload_button" & gt; Uploads & lt; / Div & gt; & Lt ;! - This is where the image will be displayed when the CFC sends the details to complete the details - & gt; & Lt ;! - You want to hide it or to start with it populate it with the default image - & gt; & Lt; Img src = "" id = "preview" alt = "preview" /> & Lt; / Body & gt; & Lt; / Html & gt;  

and CFC:

  & lt ;! --- Your destination directory --- & gt; & Lt; Cfset destdir = Extension Path (".. / / Holding") & gt; & Lt ;! --- Your Function --- & gt; & Lt; Cffunction name = "uploadimage" access = "remote" output = "false" returntype = "struct" & gt; & Lt ;! --- If you are on CF8, be sure to set the output to the wrong set. --- & gt; & Lt ;! --- Capture the file from the form --- & gt; & Lt; Cfargument name = "userFile" & gt; & Lt ;! --- Upload file to directory --- & gt; & Lt ;! --- Caution Please keep in mind that you will usually do a bunch of verification to ensure that this is an image --- & gt; & Lt ;! --- and you should probably upload the file to a directory outside your webtrot! --- & gt; & Lt; Cffile action = "upload" filefield = "userFile" destination = "# destdir #" nameconflict = "makeunique" result = "result" & gt; & Lt ;! --- Now you've got the file, make a copy here and change it again, again the new name .preview variable --- & gt; & Lt ;! --- More processing code here ... --- & gt; & Lt ;! --- Now, to return to your function on the page, create a straight for CF. This is a great place to keep everyone --- & gt; & Lt ;! --- That image information will require you to save the image name in the database for further use - & gt; & Lt; Cfset upload Return = structnew () & gt; & Lt ;! --- Console.log Use full jquery function for information on this- & gt; & Lt ;! --- Thanks Raymond Camden for your help here! --- & gt; & Lt; Cfset upload Return.newfile = # destdir # & amp; Amp; "/" & Amp; Result.serverfile & gt; & Lt; Cfset uploadReturn.preview = "Holding /" & amp; Result.serverfile & gt; & Lt; Cfset uploadreturn.name = "Something Nice Here ..." & gt; & Lt ;! --- This structure's name is json --- & gt; & Lt; Cfreturn uploader return & gt; & Lt; / Cffunction & gt;  

As above, I am incredibly new to this, so I am opening this code for refining and creative methods of dressing.

this:

  Action: 'cfc / engine.cfc? Method = uploadimage and returnFormat = json ',  

I suggest using a plain CFML page as an action, and by opening it to your CFC, To do. It distinguishes your CFC well from the scope of the form.