Here's the code for the page that will use the function:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>File Uploads Part 1</title>
<link href="mint_style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<script language="JavaScript">
<!-- // Hide from old browsers.
// Make a pop-up window function:
function create_window (image, width, height) {
// Add some pixels to the width and height:
width = width + 10;
height = height + 10;
// If the window is already open,
// resize it to the new dimensions:
if (window.popup && !window.popup.closed) {
window.popup.resizeTo(width, height);
}
// Set the window properties:
var left = (screen.width/2)-(width/2);
var top = (screen.height/2)-(height/2);
var specs = "location=no, scrollbars=no, menubars=no, toolbars=no, resizable=yes, top=" + top + ", left=" + left + ", width=" + width + ", height=" + height;
// Set the URL:
var url = "uploads/" + image;
// Create the pop-up window:
popup = window.open(url, "ImageWindow", specs);
popup.focus();
} // End of function.
//--></script>
</head>
<body>
<center>
<div id="header">
<br/><br/><br/>
<h1 align="center">File Uploads Part 1</h1>
</div>
<div id="birds"></div>
<?php # imageUploads.php
// Check if the form has been submitted:
if (isset($_POST['submitted'])) {
// Check for an uploaded file:
if (isset($_FILES['upload'])) {
// Validate the type. Should be JPEG or PNG.
$allowed = array ('image/pjpeg', 'image/jpeg', 'image/JPG', 'image/X-PNG', 'image/PNG', 'image/png', 'image/x-png');
if (in_array($_FILES['upload']['type'], $allowed)) {
// Move the file over.
if (move_uploaded_file ($_FILES['upload']['tmp_name'], "uploads/{$_FILES['upload']['name']}")) {
echo '<p align="center"><font color="#ffffff"><br/><em>The file has been uploaded!</em></font><br/>';
} // End of move... IF.
} else { // Invalid type.
echo '<h2 align="center"><font color="#fff000" size="+1"><strong>ERROR!</strong></font></h2><p class="error" align="center"><font color="#ffffff">Please upload a JPEG or PNG image.<br/>';
}
} // End of isset($_FILES['upload']) IF.
// Check for an error:
if ($_FILES['upload']['error'] > 0) {
echo 'The file could not be uploaded because: <strong>';
// Print a message based upon the error.
switch ($_FILES['upload']['error']) {
case 1:
print 'The file exceeds the upload_max_filesize setting in php.ini.';
break;
case 2:
print 'The file exceeds the MAX_FILE_SIZE setting in the HTML form.';
break;
case 3:
print 'The file was only partially uploaded.';
break;
case 4:
print 'No file was uploaded.';
break;
case 6:
print 'No temporary folder was available.';
break;
case 7:
print 'Unable to write to the disk.';
break;
case 8:
print 'File upload stopped.';
break;
default:
print 'A system error occurred.';
break;
} // End of switch.
print '</font></strong></p>';
} // End of error IF.
// Delete the file if it still exists:
if (file_exists ($_FILES['upload']['tmp_name']) && is_file($_FILES['upload']['tmp_name']) ) {
unlink ($_FILES['upload']['tmp_name']);
}
} // End of the submitted conditional.
?>
<div id="content">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" style="padding:8px;width:50%;">
<form enctype="multipart/form-data" action="imageUploads.php" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="524288">
<fieldset><legend>Select a JPEG or PNG image of 512KB or smaller to be uploaded:</legend>
<p><br/><b>File:</b> <input type="file" name="upload" /> </p>
</fieldset>
<div align="center"><br/><input type="submit" name="submit" value="Submit" /> <input type="button" name="back" value="Reset" onclick="window.location='imageUploads.php'" /></div>
<input type="hidden" name="submitted" value="TRUE" />
</form>
</td>
<td valign="top" style="padding:6px;width:50%;">
<table align="center" cellspacing="0" cellpadding="0" border="0" width="100%">
<th colspan="3" style="padding:6px;letter-spacing:3px;color:#C030A8">Uploads Directory</th>
<tr>
<td align="center" colspan="3" style="font-size:90%;">Click on the image name to view it in a separate window</td>
</tr>
<tr>
<td align="center" style="letter-spacing:1px;"><b>Image Name</b></td>
<td align="center" style="letter-spacing:1px;"><b>Image Size</b></td>
<td align="center" style="letter-spacing:1px;"><b> </b></td>
</tr>
<?php # This script lists the images in the "uploads" directory.
require_once ('includes/functions.inc.php');
$dir = 'uploads'; // Define the directory to view.
$files = scandir($dir); // Read all the images into an array.
// Display each image caption as a link to the JavaScript function:
foreach ($files as $image) {
if (substr($image, 0, 1) != '.') { // Ignores anything starting with a period.
// Get the image's size in pixels:
$image_size = getimagesize ("$dir/$image");
// Calculate the image's size in kilobytes:
$file_size = round ( (filesize ("$dir/$image")) / 1024) . "kb";
// Make the image's name URL-safe:
$image = urlencode($image);
// Print the information:
echo "\t<tr>
\t\t<td align='center' style='font-size:100%;padding:2px;'><a href=\"javascript:create_window('$image',$image_size[0],$image_size[1])\">$image</a></td>
\t\t<td align='center' style='font-size:100%;padding:2px;'>$file_size</td>
\t\t<td align='center' style='font-size:100%;padding:2px;'><a href='#' onClick='deleteMe($image);'>Delete</a></td>
\t</tr>\n";
} // End of the IF.
} // End of the foreach loop.
?>
</table>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>