ColdFusion And AJAX File Upload

  • February 8, 2017
  • Posted by: user
  • Category: Uncategorized
No Comments

I have created simple jquery plugin for file upload. I have used multiple file upload in Ajax but it’s not possible to upload file in Ajax.

This problem can be solved by this two method.

  1. flash to solve this problem.
  2. JavaScript works.

Javascript works more nice than Flash.

AJAX Upload allow you to easily upload multiple files without refreshing the page
and you can use any element to show file selection window. It works in all major browsers and doesn’t require any library to run. AJAX Upload doesn’t pollute the global namespace, and it’s tested with jQuery, Prototypejs.

The basic principal is that you hi-jack the form submission process and redirect it to
point to a hidden iFrame that you create on the fly. This iFrame then handles the file
upload the same way that any ColdFusion page would handle a file upload. Once the files
are uploaded, you can either return the data, as I do, or just halt processing.

Ok,let’s quickly review the code . Here is our the ColdFusion and AJAX demo :

Demo Download

Please review simple html page: ajaxUpload.html

[code:xml]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>ColdFusion And AJAX File Upload Demo</title>

<!– Linked scripts. –>
<script type="text/javascript" src="/js/jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="/js/ajax_upload.js"></script>
<script>
var browserFields=0;
function funtest(){
$(‘#my_form’).ajaxFileUpload({callback:function(res){
alert(res);
}
});
}
function addNew()
{
browserFields = browserFields + 1;

var tbody = document.getElementById("tblAttach").getElementsByTagName("tbody")[0];
var row = document.createElement("TR");
var td1 = document.createElement("TD");
var td1content = ‘File## ‘ + browserFields + ‘&nbsp;<input type="file" name="upload’ + browserFields + ‘" class="frmitm">’;
td1.setAttribute("vAlign","top");
td1.innerHTML=td1content;
row.appendChild(td1);
tbody.appendChild(row);
document.my_form.browserFields.value = browserFields;
}
</script>
</head>
<body>
<form id="my_form" name="my_form">
<input type="hidden" name="browserFields">
<h1>
ColdFusion And AJAX File Upload Demo
</h1>
<table cellspacing="0" cellpadding="2" border="0">
<tr>
<td>
<table id="tblAttach">
<tbody></tbody>
</table>
<script>addNew()</script>
</td>
</tr>
<tr>
<td align="right"><input type="button" name="browser" value="Add New field" onclick="addNew()" class="but"></td>
</tr>
<tr>
<td><input type="button" value="Upload Files" name="test1" id="test1" onclick="funtest();")/></td>
</tr>
</table>
</form>

</body>
</html>

[/code]

let’s take a look at our ColdFusion page that will handle the AJAX style file uploads:ajaxUpload.cfm

[code:cf]

<!—
Create an array of files names that we are going to be
passing back to the client.
—>
<cfset arrFiles = [] />

<!—
Loop over form fields looking for files. We dont know if
or how many files are going to be uploaded at this point.
—>
<cfloop index="strFileIndex" from="1" to="#form.browserFields#" step="1">

<!— Build dynamic file field (form field key). —>
<cfset strField = "upload#strFileIndex#" />

<!—
Check to see if file field exists and that it has
value in it (file path).
—>
<cfif (
StructKeyExists( FORM, strField ) AND
Len( FORM[ strField ] )
)>

<!— Upload file. —>
<cffile action="upload" filefield="#strField#" destination="#Application.path#\upload\"
nameconflict="makeunique"
/>

<!—
Add the generated server file name to the array of
file names that we are going to return.
—>
<cfset ArrayAppend( arrFiles, CFFILE.ServerFile ) />

</cfif>

</cfloop>

<!—
Create the return HTML. Remember, we are going to be
treating the BODY of the returned document as if it
were a JSON string.
—>
<cfsavecontent variable="strHTML">
<cfoutput>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>#SerializeJSON( arrFiles )#</body>
</html>

</cfoutput>
</cfsavecontent>

<!— Create binary response data. —>
<cfset binResponse = ToBinary( ToBase64( strHTML ) ) />

<!— Tell the client how much data to expect. —>
<cfheader
name="content-length"
value="#ArrayLen( binResponse )#"
/>

<!—
Stream the "plain text" back to the client. It’s actually
HTML and it is important that we announce it as HTML
otherwise the client might not know how to work with it.
—>
<cfcontent
type="text/html"
variable="#binResponse#"
/>

[/code]

Here is the jQuery Javascript that hi-jacks the form upload and wires the client and server together: ajax_upload.js

[code:js]

var objData = ”;
// When the DOM loads, initailize the form to upload the files
// using an AJAX "like" call rather than a form submit.
(function($){
$.fn.extend({
ajaxFileUpload: function(options){
var defaults = {
callback : function(res){}
};
var opts = $.extend({}, defaults, options);
return this.each(function(){
var jForm = $(this);
var jThis = $(this);
var strName = ("uploader" + (new Date()).getTime());
var jFrame = $("<iframe name=\"" + strName + "\" src=\"about:blank\" />");
jFrame.css("display", "none");
jFrame.load(function(objEvent){
var objUploadBody = window.frames[strName].document.getElementsByTagName("body")[0];
var jBody = $(objUploadBody);
objData = eval("(" + jBody.html() + ")");
//prompt("Return Data:", objData);
opts.callback(objData);
setTimeout(function(){
jFrame.remove();
}, 100);
});
$("body:first").append(jFrame);
jThis.attr("action", "/ami/ajax_upload_action.cfm").attr("method", "post").attr("enctype", "multipart/form-data").attr("encoding", "multipart/form-data").attr("target", strName);
$(jForm).submit();
});
}
});
})(jQuery);

[/code]

Reference : Clickhere