<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>JQuery File Upload Plugin Script - Uploadify</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="pt" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />

<meta name="description" content="JQuery File Upload Plugin Script - Uploadify" />
<meta name="keywords" content="uploadify" />
<meta name="robots" content="noindex,nofollow" />
<meta name="googlebot" content="noindex,nofollow" />
<meta name="google" value="notranslate" />
<meta name="author" content="wdwebdesigner.com.br" />
<meta name="version" content="2.0" />
<meta name="copyrigt" content="Copyright (c) 2009-2011" />
<meta name="rating" content="general" />

<script type="text/javascript" src="../jquery-1.5.1.min.js"></script>

<link type="text/css" rel="stylesheet" href="uploadify.css" />
<script type="text/javascript" src="jquery.uploadify.min.js"></script>
<script type="text/javascript" src="flash_detect.1.0.4.min.js"></script>

<script type="text/javascript">
function doFormSubmit() {
	// GRAB FIELDS VALUES AND SEND TO uploadify.php, YOU CAN DO WHATEVER YOU WANT WITH THEM IN uploadify.php FILE
	var myObjVars = {};
	$("form[id$=myForm] input").each(function () {
		switch ($(this)[0].type) {
			case "text":
				myObjVars[$(this)[0].id] = $(this).val();
			break;
		}
	});
	$('#gallery').uploadifySettings('postData', myObjVars);

	// UPLOAD IMAGES
	$('#gallery').uploadifyUpload();
}

$(document).ready(function() {
	// Verify if Flash Player is Installed and if Flash Player version is 9 or higher
	if (!FlashDetect.versionAtLeast(9)) {
		// You can have an invisible DIV that contains an alternative form input box to upload files without uploadify, when Flash Detect Fails, you set it to visible and handle things the way you want, you can use this error control to do whatever you want if user has no Flash Player Inslalled.
		$("#gallery").html('You do not have Flash Player installed or your Flash Player is too old!<br>Please install Flash Player 9 or higher.');
	} else {
		$("#gallery").uploadify({
			// Required Settings
			langFile : 'uploadifyLang_en.js',
			swf : 'uploadify.swf',
			uploader : 'uploadify.php',

			// Options - HERE ARE ALL USEFUL OPTIONS, DON'T USE ANYTHING THAT ISN'T LISTED HERE
			'debug'           : false, // DON'T SET THIS TO TRUE UNLESS YOU NEED TO SEE IF THERE IS ANY ERROR IN YOUR SCRIPT. IN YOUR SITE, JUST DON'T USE THIS OPTION AT ALL
			'auto'            : false,
			'buttonText'      : 'Select Images',
			'width'           : 150,
			'height'          : 30,
			'cancelImage'     : 'uploadify-cancel.png',
			'checkExisting'   : 'uploadify-check-exists.php',
			'fileSizeLimit'   : 1*1024, // 1MB
			'fileTypeDesc'    : 'Image Files',
			'fileTypeExts'    : '*.gif;*.jpg;*.png',
			'method'          : 'post',
			'multi'           : true,
			'queueID'         : 'fileQueue',
			'queueSizeLimit'  : 999,
			'removeCompleted' : true,
			'postData'        : {},
			'progressData'    : 'all',

			onSelect : function(file) {
				$("#formFields").append("<tr id='table_"+file.id+"'><td align='right'>Tile for image <b>"+file.name+"</b>:</td><td align='left'><input type='text' id='img_"+file.id+"_title' name='img_"+file.id+"_title' value='' /></td></tr>");
			},

			onUploadSuccess : function(file,data,response) {
				$("#myForm").append("<input type='hidden' id='img_"+file.id+"_fileName' name='img_"+file.id+"_fileName' value='"+data+"' />"); // INSERT IMAGE FILENAME IN A HIDDEN FORM FIELD
			},

			onQueueComplete: function (stats) {
				$('#myForm').submit(); // THIS IS AN EXAMPLE, YOU CAN SUBMIT YOUR INFOS WITH AJAX IF YOU WANT
			}
		});
	}
});
</script>

</head>

<body>

<?php
// THIS IS AN EXAMPLE, YOU CAN GRAB THIS INFOS VIA AJAX TO INSERT IN YOUR DATABASE
$submitting = $_REQUEST['submitting'];
if ($submitting == 'yes') {
	// REQUEST POST INFOS
	foreach ($_REQUEST as $var => $value) {
		if (stripos($var, 'img_SWFUpload_') !== false) {
			if (stripos($var, '_title') !== false){
				$img_title[] = $value;
			}
			if (stripos($var, '_fileName') !== false){
				$img_fileName[] = $value;
			}
		} else {
			$$var = $value;
			echo "$var: ".$$var."<br>";
		}
	}

	foreach ($img_fileName as $i => $value) {
		echo "img_title[$i]: $img_title[$i]<br>";
		echo "img_fileName[$i]: $img_fileName[$i]<br>";
	}

	echo '<br>';
}
?>

<font style='font-size: 18px;'>In this demo, fields values will be sent to uploadify.php and you can work with them there. Also, every selected image will generate an automatic "<b>Title for image</b>" field (this will be sent to uploadify.php too), and the file name will be stored in a hidden field, so file name and optional title for image will be submitted with your form so you can store this values in your database. Take a look in the source code to see how it works.</font>
<br><br>
More Details: <a href='http://www.uploadify.com/forums/discussion/7597/uploadify-3-with-new-features-corrections-and-documentation/' target='_blanc'>Directly from Uploadify Forums</a>
<br><br>

<form name='myForm' id='myForm' method='post' action='<?php echo $_SERVER['PHP_SELF']?>'>
<input type='hidden' id='submitting' name='submitting' value='yes' />

<table width='600' border='0' cellspacing='0' cellpadding='2' align='center'><tr>
<td align='left'>Fields that will go through <b>postData</b> variables to <b>uploadify.php</b>:</td>
</tr></table>
<table id='formFields' width='600' border='0' rules='none' frame='box' style='background-color: #FFFFFF; border: 1px solid #CC0000;' cellspacing='0' cellpadding='5' align='center'>
<tr><td align='right'>Field 1:</td><td align='left'><input type='text' style='width: 300px;' name='field1' id='field1' value=''></td></tr>
<tr><td align='right'>Field 2:</td><td align='left'><input type='text' style='width: 300px;' name='field2' id='field2' value=''></td></tr>
<tr><td align='right'>Field 3:</td><td align='left'><input type='text' style='width: 300px;' name='field3' id='field3' value=''></td></tr>
<tr><td align='right'>Field 4:</td><td align='left'><input type='text' style='width: 300px;' name='field4' id='field4' value=''></td></tr>
<tr><td align='right'>Field 5:</td><td align='left'><input type='text' style='width: 300px;' name='field5' id='field5' value=''></td></tr>
</table>

<br><br>

<table width='600' border='0' cellspacing='0' cellpadding='2' align='center'><tr>
<td align='left'>Images:</td>
<td align='right'><font style='font-size:10px;'><a href='#' onclick="jQuery('#gallery').uploadifyCancel('*'); return false;">(Clear Images List)</a></font></td>
</tr></table>
<table width='600' border='0' rules='none' frame='box' style='background-color: #FFFFFF; border: 1px solid #1f6798;' cellspacing='0' cellpadding='5' align='center'>
<tr><td align='center'>
<div id='gallery'>You've got a problem with your JavaScript</div>
</td></tr>
</table>

<br><br>

<table width='600' border='0' cellspacing='0' cellpadding='2' align='center'><tr>
<td align='left'>fileQueue:</td>
</tr></table>
<table width='600' border='0' rules='none' frame='box' style='background-color: #FFFFFF; border: 1px solid #CC0000;' cellspacing='0' cellpadding='5' align='center'>
<tr><td align='center'>
<div id='fileQueue'></div>
</td></tr>
</table>

<br>

<center><button type="button" name="btSubmit" id="btSubmit" onclick="doFormSubmit()">Upload and Submit</button></center>

<br>

</form>

</body>
</html>