Archive

You are currently browsing the Miles Per Hour blog archives for February, 2009.

»
«

Feb

5

AJAX file upload

By mike@mike-miles.com

Recently for a project I needed to build a custom photo gallery web application, which would allow the administrators and site users to both uploaded photos. The thing about file uploads is that to the user (which in my case was administrators and site visitors) is that it can be very boring to the user, and not very elegant. Since users were providing additional information to the photo, I was saving everything to a database including the filename of the photo uploaded (for each upload I would generate a random name). I wanted the user to be able to upload their photo, preview it, then finish completing the rest of the form. Normally to do this would require at least 3  steps;

  1. Have the user upload their file, and submit the page.
  2. Reload the page, save the file then display a second form for the user to provide details
  3. save the details to the database.

Now this fine, a tried and true way to do it, but boring to the user because before they can finish filling out the form they would have to wait for the file upload to finish (which could take awhile depending on file size and connection). We dont want the user to have to sit there for a long time waiting for the upload to complete (idle users are BAD, for a number of reasons, example it  gives them time to say ‘screw it’ and navigate away from our site).  It would be much better if the user had something to do while their photo was uploading, keeping them busy and happy.

So what I wanted to do was have the user select a photo,  which would then (using AJAX) be sent to another page to upload, and return the file name.  While this was happening the user would see a loading icon, and be able to complete the rest of the form.  Once the upload page returned the filename, I would display the form’s submit button.

At first I was stuck on how to exactly accomplish this effect (I knew I wanted to use AJAX).  After doing some googling I came across this solution.

Basically a full blown AJAX file upload is not possible, but we can get the feel and effect using a hidden Iframe.

Sorry to say I’ve had to remove this code for legal reasons.
but feel free to checkout the source I used to create the code to draft your own solution.

Comments Off
RSS
Filed under: Ajax, code, javascript, PHP

Feb

4

Variable function calls

By mike@mike-miles.com

When using AJAX or sending vaiables to a PHP page to run a function there is a nice peice of code I like to put at the top of the PHP page.  It is a peice of code that I use to run a function by passing its name through a variable. This allows you to GET or POST to a page many times and preform multiple functions. Here is the code and I’ll explain a bit more of a few ways that you can use it;

1
2
3
4
5
6
7
8
9
10
11

<?PHP 
	//if passed the variable 'function' through GET or POST 
	if($function = $_REQUEST['function']){ 
		//if function exists, run function 
		if(function_exitst($function)) $function(); 
		//else show error 
		else echo 'Error: function '',$function,'()' does not exist.'; 
		//Exit script
		exit; 
	} 
?>

So to reiterate this is what this function does.

If the page is passed the varaible ‘function’ (either through GET or POST, hence the $_REQUEST) then it knows to run a function on the page.

It’ll then set the passed variable to the $function variable, and test to see if the function exists (by using PHP’s function_exists() function)

If the function does exists, the code then calls if ($function();), else it’ll show an error.

for example you could use this code like so;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?PHP 
	//if passed the variable 'function' through GET or POST 
	if($function = $_REQUEST['function']){ 
		if(function_exitst($function)) $function(); 
		else echo 'Error: function '',$function,'()' does not exist.'; 
		exit; 
	} 
 
	function submitForm(){ 
		$value = $_POST['field1']; 
		echo 'You inputed ',$value,'.'; 
	} 
?> 
<html>  
	<head>  
		<title>Sample</title>  
	</head>  
	<body> 
		<form action="<?= $_SERVER['PHP_SELF']; ?>?function='submitForm'" method="POST">  
			<input name="field1" type="text" />  
			<input type="submit" value="submit" />  
		</form>  
	</body> 
</html>

So the form will submit to itself, and run the function ‘submitForm’ when it does so.  Of course this is a very simple example.

you can download the complete version of this code, on my code page

Comments Off
RSS
Filed under: code, PHP
« Previous Page