Article
Build An Automated PHP Gallery System In Minutes
The Browser-Based Uploading System
For each image we upload, we require two basic input fields: one to store the filename of the image and the other to store the image’s caption. To simplify matters, we’d like to upload multiple images in one go, rather than one by one. The code we will build now must be able to produce any number of fields as directed by us, the administrators. This will eradicate a lot of manual work that would otherwise have been needed to add extra form fields.
Let’s build an automated upload form. We’ll name it “preupload.php”.
<?php
include 'config.inc.php';
// initialization
$photo_upload_fields = '';
$counter = 1;
// If we want more fields, then use, preupload.php?number_of_fields=20
$number_of_fields = (isset($_GET['number_of_fields'])) ?
(int)($_GET['number_of_fields']) : 5;
// Firstly Lets build the Category List
$result = mysql_query('SELECT category_id,category_name FROM gallery_category');
while($row = mysql_fetch_array($result)) {
$photo_category_list .= <<<__HTML_END
<option value="$row[0]">$row[1]</option>\n
__HTML_END;
}
mysql_free_result( $result );
// Lets build the Image Uploading fields
while($counter <= $number_of_fields) {
$photo_upload_fields .= <<<__HTML_END
<tr><td>
Photo {$counter}:
<input name="photo_filename[]"
type="file" />
</td></tr>
<tr><td>
Caption:
<textarea name="photo_caption[]" cols="30"
rows="1"></textarea>
</td></tr>
__HTML_END;
$counter++;
}
// Final Output
echo <<<__HTML_END
<html>
<head>
<title>Lets upload Photos</title>
</head>
<body>
<form enctype="multipart/form-data"
action="upload.php" method="post"
name="upload_form">
<table width="90%" border="0"
align="center" style="width: 90%;">
<tr><td>
Select Category
<select name="category">
$photo_category_list
</select>
</td></tr>
<!—Insert the image fields here -->
$photo_upload_fields
<tr><td>
<input type="submit" name="submit"
value="Add Photos" />
</td></tr>
</table>
</form>
</body>
</html>
__HTML_END;
?>
The above code produces a pretty simple html form; however there are a couple of things to note.
enctype attribute in <form>
By specifying the value for enctype attribute as "multipart/form-data", each image’s contents will be packaged for submission in a separate section of a multipart document. This document will be sent to the target script, in our case, upload.php.
Adding Extra Fields
The default for the number of fields is set to 5, but you might need to upload more files in one batch. This can be achieved using the above code, which allows us to specify the number of fields via the GET method. For example, if you want 25 fields, you can simply insert the line, preupload.php?number_of_fields=25.
Note: In your php.ini file, you must have safe_mode switched off, and the file_uploads attribute set to allow uploads. Run phpinfo() to view your current settings.
The Real Part: upload.php
We will now build upload.php, which was used as the target for the above pre-upload form. Most of the magic happens within this page!
- We’ll get smart and check whether the uploaded file is indeed an image
- We’ll index the image entries in our database
- We’ll store the uploaded image
- Finally, we’ll create automatic thumbnails
A source array named $_FILES is created by PHP every time we upload any files. Before we can start processing the uploaded files, we need to fetch some information about these images. The array contains the following details about any uploaded file:
- The real file name, e.g. my_birthday.jpg
- The mime type of the file, e.g. image/pjpeg
- The temporary location of the file on the server
- The file’s size (in bytes)
We’ll create our own arrays to fetch these values. Let’s take this opportunity to fetch the captions of the images, too, and assign them to an array.
// Fetch the image array sent by preupload.php
$photos_uploaded = $_FILES['photo_filename'];
// Fetch the image caption array
$photo_captions = $_POST['photo_captions'];