Example uploadify using forms

Ok so here is the complete sample code for using forms with uploadify. Firstly it would be good for you to have the basic demo working and your will have to change the links to the js css and upload.php to suit your paths. in the example upload.php i am basically showing you how to return errors and the full list of get variables posted from the form. You will obviously need to include the right upload.php found on the uploadify web site. you can then just use $_GET['input_name'] to action any of your form fields.

form.php


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

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

<script type="text/javascript">
$(document).ready(function() {
	$("#fileUpload").fileUpload({
		'uploader': 'uploadify/uploader.swf',
		'cancelImg': 'uploadify/cancel.png',
		'script': 'upload.php',
		'folder': 'files',
		'multi': true,
		'buttonText': 'Select Files',
		'checkScript': 'uploadify/check.php',
		'displayData': 'speed',
		'simUploadLimit': 1,
		'onComplete': function(a, b, c, d, e){ alert(d);},
		'onAllComplete': function(event,data){
			//something here
		}
	});	

});
</script>

<script type="text/javascript">
function startUpload(id){
	var queryString = '&' + $('#new_doc_upload').serialize();
	$('#fileUpload').fileUploadSettings('scriptData',queryString);
	$('#fileUpload').fileUploadStart();
}
</script>	

</head>
<body>

<form id="new_doc_upload" method="get">
<div id="fileUpload">You have a problem with your javascript</div>
<a href="javascript:startUpload('fileUpload')">Start Upload</a> |  <a href="javascript:$('#fileUpload').fileUploadClearQueue()">Clear Queue</a>
<p></p>

Your name <input type="text" name="yourname" /><br />
Your comment <textarea name="yourcomment"></textarea>
</form>	

</body>
</html>

upload.php


<?php

if (!empty($_FILES)) {
	$tempFile = $_FILES['Filedata']['tmp_name'];

	print_r($_GET);

    switch ($_FILES['Filedata']['error'])
    {
         case 0:
                //$msg = "No Error (" . print_r($_GET) .")"; // comment this out if you don't want a message to appear on success.
                break;
         case 1:
                $msg = "The file is bigger than this PHP installation allows";
                break;
          case 2:
                $msg = "The file is bigger than this form allows";
                break;
           case 3:
                $msg = "Only part of the file was uploaded";
                break;
           case 4:
                $msg = "No file was uploaded";
                break;
           case 6:
                $msg = "Missing a temporary folder";
                break;
           case 7:
                $msg = "Failed to write file to disk";
                break;
           case 8:
                $msg = "File upload stopped by extension";
                break;
           default:
                $msg = "unknown error ".$_FILES['Filedata']['error'];
                break;
    }

    If ($msg)
        $stringData = "Error: ".$_FILES['Filedata']['error']." Error Info: ".$msg;
    else
       $stringData = "1"; // This is required for onComplete to fire on Mac OSX
    echo $stringData;

}
//echo "1";
?>

Viewing 5 Comments

 

Trackbacks

(Trackback URL)

close Reblog this comment
blog comments powered by Disqus