Upload multiple file using jquery and Coldfusion

Sorry, But i did not do something  new for upload multiple files.I modified the files according to coldfusion requirement. It may be better but currently i have not enough time for experiments for these files. I will do better in future using these files....

but until use these files. If you have any solutions for making better please give me  suggestions.

Download jquery files form http://blueimp.github.com/jQuery-File-Upload/

uploadedfiles.cfm


<cfoutput>
<script Language="JavaScript">
var popUpWin2=0;
function OpenPopUp(URLStr, left, top, width, height, winName)
{
if(popUpWin2)
{
if(!popUpWin2.closed) popUpWin2.close();
}
popUpWin2 = window.open(URLStr, winName, 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width='+width+',height='+height+',left='+left+', top='+top+',screenX='+left+',screenY='+top+'');
}
</script>
<table width="500" cellpadding="0" cellspacing="7" border="0" bordercolor="red" bgcolor="##ffffff">
<tr>
<td align="center" valign="middle">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bordercolor="Blue">
<tr>
<td valign="top" align="left">
&nbsp;&nbsp;<font class="BHeading">Uploaded Files</font>
</td>
<td valign="middle" align="right" width="100">
<a href="javascript:OpenPopUp('uploadfiles.cfm?',100,100,850,500,'PopUp');"><input type="button" value="UploadFiles" border="0" /></a></td>
</tr>
</table>
<table border="0" width="100%" cellpadding="0" cellspacing="1" bordercolor="Green">
<tr><td height="5"></td></tr>
<tr>
<td colspan="9" height="1" bgcolor="##ffffff"></td>
</tr>
<CFDIRECTORY action="LIST" DIRECTORY="E:\ColdFusion10\cfusion\wwwroot\AjaxUpload\uploads" NAME="Files" SORT="datelastmodified DESC">
<cfif Files.recordcount NEQ 0>
<tr>
<td valign="top" align="left" bgcolor="##ffffff">
&nbsp;&nbsp;Document Name
</td>
<td valign="top" align="left" bgcolor="##ffffff">
&nbsp;&nbsp;File Size
</td>
<td valign="top" align="left" width="100" bgcolor="##ffffff">
&nbsp;&nbsp;Upload Date
</td>
</tr>
<tr><td colspan="9" height="1" bgcolor="##ffffff"></td></tr>
<cfset Total=0>
<cfset FileSize=0>
<cfloop query="Files">
<tr>
<td valign="top" align="left" >
&nbsp;&nbsp;#Name#
</td>
<td valign="top" align="left" >
&nbsp;&nbsp;#NumberFormat(Evaluate(Size/1024),'______.__')# KB&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
<td valign="top" align="left" >
&nbsp;&nbsp;#DateFormat(dateLastModified,'dd-mmm-yyyy')#
</td>
</tr>
</cfloop>
</table>
<cfelse>
<center>
<br><br>
<table width="100%">
<tr>
<td align="center">
<font class="Title">Sorry, no records found.<br><br></font><br>
</td>
</tr>
</table>
</center>
</cfif>
</td>
</tr>
</table>
</cfoutput>
view raw uploadedfiles.cfm hosted with ❤ by GitHub
Output :-

uploadfiles.cfm
<cfoutput>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Designcell</title>
<link rel="stylesheet" href="flashuploader/css/bootstrap.min.css">
<style>body{padding-top:60px;}</style>
<link rel="stylesheet" href="flashuploader/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="flashuploader/css/bootstrap-image-gallery.min.css">
<link rel="stylesheet" href="flashuploader/css/jquery.fileupload-ui.css">
</head>
<script Language="JavaScript">
function WriteAndClose()
{
parent.opener.location.reload();
self.close();
}
</script>
<body onUnload="WriteAndClose()">
<div class="container">
&nbsp;&nbsp;Upload Files
<p><font style="font-family: 'Trebuchet MS'; color: ##1A68A1; font-size:11px;font-weight: bold;text-decoration: none; align:center;">Please choose the files from your computer and click on the upload button to add them to the documents. Please click on the Finish button when done.
</font></p>
<br>
<form id="fileupload" action="upload.cfm" method="POST" enctype="multipart/form-data">
<div class="row fileupload-buttonbar">
<div class="span7">
<span class="btn btn-success fileinput-button">
<span><i class="icon-plus icon-white"></i> Add files...</span>
<input type="file" name="files" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="icon-upload icon-white"></i> Start upload
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i> Cancel upload
</button>
</div>
<div class="span5">
<!-- The global progress bar -->
<div class="progress progress-success progress-striped active fade">
<div class="bar" style="width:0%;"></div>
</div>
</div>
</div>
<br>
<!-- The table listing the files available for upload/download -->
<table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="##modal-gallery"></tbody></table>
</form>
<br>
</div>
<script>
var fileUploadErrors = {
maxFileSize: 'File is too big',
minFileSize: 'File is too small',
acceptFileTypes: 'Filetype not allowed',
maxNumberOfFiles: 'Max number of files exceeded',
uploadedBytes: 'Uploaded bytes exceed file size',
emptyResult: 'Empty file upload result'
};
</script>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/html">
{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
<tr class="template-upload fade">
<td class="preview"><span class="fade"></span></td>
<td class="name">{%=file.name%}</td>
<td class="size">{%=o.formatFileSize(file.size)%}</td>
{% if (file.error) { %}
<td class="error" colspan="2"><span class="label label-important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td>
{% } else if (o.files.valid && !i) { %}
<td>
<div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
</td>
<td class="start">{% if (!o.options.autoUpload) { %}
<button class="btn btn-primary">
<i class="icon-upload icon-white"></i>Start
</button>
{% } %}</td>
{% } else { %}
<td colspan="2"></td>
{% } %}
<td class="cancel">{% if (!i) { %}
<button class="btn btn-warning">
<i class="icon-ban-circle icon-white"></i>Cancel
</button>
{% } %}</td>
</tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/html">
{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
<tr class="template-download fade">
<td class="preview"><span class="fade"></span></td>
<td class="name">
{%=file.name%}
</td>
<td class="size">
{%=o.formatFileSize(file.size)%}
</td>
<td class="size">File Uploaded</td>
</tr>
{% } %}
</script>
<table width="100%" cellpadding="0" cellspacing="7" border="0" bordercolor="red">
<tr>
<td align="center" valign="top">&nbsp;&nbsp;&nbsp;&nbsp;
<a href="##" onClick="javascript:WriteAndClose();"><input type="button" value="Finish"></a>
</td>
</tr>
<tr>
<td align="center" valign="top">&nbsp;&nbsp;&nbsp;&nbsp;
</td>
</tr>
</table>
<script src="flashuploader/js/jquery.min.js"></script>
<script src="flashuploader/js/vendor/jquery.ui.widget.js"></script>
<script src="flashuploader/js/tmpl.min.js"></script>
<script src="flashuploader/js/load-image.min.js"></script>
<script src="flashuploader/js/bootstrap.min.js"></script>
<script src="flashuploader/js/jquery.iframe-transport.js"></script>
<script src="flashuploader/js/jquery.fileupload.js"></script>
<script src="flashuploader/js/jquery.fileupload-ui.js"></script>
<script src="flashuploader/js/main.js"></script>
</body>
</html>
</cfoutput>
view raw uploadfiles.cfm hosted with ❤ by GitHub
 

Output:


upload.cfm :

<cfoutput>
<cfif structkeyexists(form,"files")>
<cffile action="UPLOAD" filefield="files" destination="E:\ColdFusion10\cfusion\wwwroot\AjaxUpload\uploads\" nameconflict="MAKEUNIQUE">
</cfif>
<cfheader name="pragma" value="no-cache">
<cfheader name="cache-control" value="private">
<cfheader name="Content-Disposition" value="inline; filename=files.json">
<cfheader name="Access-Control-Allow-Methods" value="GET, POST, ACCEPT, OPTIONS,DELETE" />
<cfheader name="Access-Control-Allow-Headers" value="X-File-Name, X-File-Type, X-File-Size" />
</cfoutput>
view raw upload.cfm hosted with ❤ by GitHub
 

After click on Addfiles..

Select all files with ctr+a with firefox.....

Click Start Upload and after on finish...
Congratulation files uploaded.

 I hope this is useful for upload multiple files with coldfusion using jquery file upload.


Comments

Post a Comment

Popular posts from this blog

Create CSV file in Coldfusion Using CFFile

Create CSV file in Coldfusion Using CFFile <cfquery name="GetUsers" datasource="TestDB">     SELECT UserID, UserName, Password,Active,     CASE Active         WHEN 1 THEN 'Active'         WHEN 0 THEN 'InActive'         END AS Status     FROM shema_users        </cfquery> <cfset HeaderColumn = "UserID,UserName,Password,Status"> <CFSET FileOutputPath = "C:\ColdFusion10\cfusion\wwwroot\Test\uploads">                            <CFFILE ACTION="Write" FILE="#FileOutputPath#\Users.csv" OUTPUT="#HeaderColumn#" nameconflict="overwrite" addnewline="yes">                     <cfloop query=...
Read more

Login with facebook using coldfusion

Image
Here is a example. How to make facebooklogin for a website using coldfusion?. Before start you make a account with facebook. Step 1 :  Create a app for your website using facebooklogin.here you can get app_key and secret_key. Step 2: Step 4:  You can see this screen :   Step 5:   After filling UserName and Password a screen show like this...    After click ok the redirect to logininformation:- Output in logininformation.cfm  I hope this is useful for you. if you are facing any problem write us in comment. we are happy to solve that problem.   For more details visit these links : -   http://developers.facebook.com/docs/facebook-login/   //Permissions   http://developers.facebook.com/docs/reference/login/   https://developers.facebook.com/docs/reference/api/user/
Read more

Get Previous One Day Data in Sql Server

Get Previous One Day Data in Sql Server using convert(), dateadd(), datediff() and getdate() sql functions and between operator. SELECT OrderID , CustomerID , OrderDateTime FROM [ DEMODB ] . [ dbo ] . [ Orders ] WHERE OrderDateTime   BETWEEN CONVERT ( VARCHAR ( 10 ) ,   DATEADD ( DAY , DATEDIFF ( DAY , 0 , GETDATE ( ) ) , - 1 ) , 101 ) + ' ' + '00:00:00' AND CONVERT ( VARCHAR ( 10 ) ,   DATEADD ( DAY , DATEDIFF ( DAY , 0 , GETDATE ( ) ) , - 1 ) , 101 ) + ' ' + '23:59:59'
Read more