Ajax upload with ColdFusion
I’ve once wrote file upload with flash. But I’m thinking of the weak point of this program would be alright if users don’t have flash player as well as using with GuestAccount. That’s I need to consider how to solve this problem and want to do file upload with Ajax. Eventually, I can do it. Here is coding.
index.cfm
<!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; charset=utf-8″ />
<title>AJAX File Uploader</title>
<script language=”javascript” type=”text/javascript”>
<!–
function startUpload(){
document.getElementById(‘f1_upload_process’).style.visibility = ‘visible’;
document.getElementById(‘f1_upload_form’).style.visibility = ‘hidden’;
return true;
}function stopUpload(success){
var result = ”;
if (success == 1){
result = ‘<span class=”msg”>The file was uploaded successfully!<\/span><br/><br/>’;
}
else {
result = ‘<span class=”emsg”>There was an error during file upload!<\/span><br/><br/>’;
}
document.getElementById(‘f1_upload_process’).style.visibility = ‘hidden’;
document.getElementById(‘f1_upload_form’).innerHTML = result + ‘<label>File: <input name=”myfile” type=”file” size=”30″ /><\/label><label><input type=”submit” name=”submitBtn” class=”sbtn” value=”Upload” /><\/label>’;
document.getElementById(‘f1_upload_form’).style.visibility = ‘visible’;
return true;
}
//–>
</script>
</head><body>
<form action=”upload.cfm” method=”post” enctype=”multipart/form-data” target=”upload_target” onsubmit=”startUpload();” >
<p id=”f1_upload_process”>Loading…<br/><img src=”loader.gif” /><br/></p>
<p id=”f1_upload_form” align=”center”><br/>
<label>File:
<input name=”myfile” type=”file” size=”30″ />
</label>
<label>
<input type=”submit” name=”submitBtn” value=”Upload” />
</label>
</p><iframe id=”upload_target” name=”upload_target” src=”#” style=”width:0;height:0;border:0px solid #fff;”></iframe>
</form>
</body>
Upload.cfm
<cffile action=”UPLOAD” filefield=”myfile” destination=”#application.fpath#test/ajaxupload/files/” nameconflict=”MAKEUNIQUE”>
<cfset myfile = file.serverfile><script language=”javascript” type=”text/javascript”>window.top.window.stopUpload(‘1′);</script>
How? It’s easy thought, isn’t it?
Best Credit to : http://www.ajaxf1.com/download.html?item=12
