We recently picked up a client whose web designers stored hundreds of images on her web server. The client is not tech-savvy and wanted to find a way to view the images on her server.
We wrote this simple PHP script that can be dropped into any image directory on a web server that runs PHP 5. The script will read and display the image file names in that directory. The scandir function that we used is only available in PHP 5.x and newer versions, so you do need to make sure that the server runs PHP 5.
The scandir function replaced the older dir class and makes the process much simpler. scandir reads the entire contents of a directory into a sorted array. By default, the array is sorted in ascending order, but if can also sort in descending order. With dir, sorting is an additional step. scandir also pulls in the dot designations for the current directory and sub-directories ( . and ..), so those have to be filtered out. It is important to filter out any file types that you do not want to expose to others, just in case someone happens to find your image viewing script. It is usually harmless to expose the names of images, but may not be harmless to expose other file types.
For more details about scandir, see the PHP Manual for scandir. There are options in the manual page for filtering out other types of files.
You can name this script anything that you wish and just drop it into an image directory. It offers a count of the total number of images found, as well and the height and width dimensions for a selected image. Scroll through the list, select an image name and click the Select button to display the image information.
We named the PHP script ImageViewer.php. it would be a good idea to name the script using an obscure name that only you will remember if you do not want anyone else to find the script.
ImageViewer.php
<?php
$selectedImage = (isset($_POST['selectedImage'])) ? trim($_POST['selectedImage']) : "";
?>
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Image Viewer</title>
<meta name="robots" content="noindex,nofollow" />
</head>
<body>
<strong>Image Viewer</strong>
<br /><br />
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<select name="selectedImage" id="selectedImage">
<option value="">- Select an Image - </option>
<?php
$files = scandir('./');
$c1 = count($files);
$c2 = 0;
for($i=0; $i<$c1; $i++)
{
if(strlen($files[$i]) > 3)
{
$extension = strtolower(substr($files[$i], -4));
if(($extension == ".gif") OR ($extension == ".jpg") OR ($extension == ".png"))
{
echo "<option value=\"".trim($files[$i])."\"";
if($selectedImage == $files[$i]) echo " selected=\"selected\"";
echo ">".$files[$i]."</option>\n";
$c2++;
}
}
}
?>
</select>
<input type="submit" value="Select" />
</form>
<br />
<?php echo "total images = ".$c2; ?>
<br /><br />
<?php
if(!empty($selectedImage))
{
?>
<img src="<?php echo $selectedImage ?>" alt="" />
<br /><br />
<?php
list($width, $height) = getimagesize("$selectedImage");
echo "width = ".$width."<br />";
echo "height = ".$height."<br />";
}
?>
</body>
</html>
Here is what you should see:
Let’s walk through the code.
Lines 1 to 3. This is a recursive script, which means that it calls itself when processing the selection. Line 2 reads the image file name that is passed by the form variable.
Lines 4 to 10. This is an HTML 5 script. We included the robots meta tag to prevent the script from showing up in a search engine. Yeah, that can happen if you use the Google or Yahoo toolbar with your browser.
Line 18. Calls the current directory. If you wanted to set it up to read a sub-directory, you could do that by changing the path here and on lines 49 and 57.
Line 23. Starts looping through the array names $files.
Line 25. Filters out the directory “dot” names.
Line 28. Filters out everything except the file extensions that you allow.
Lines 46 to 49. If an image is selected, the image is displayed.
Lines 52 to 54. Pulls in the image dimension attributes using PHP’s getimagesize and displays them.
That’s all there is to it. This script can easily be modified to display files other than images. Use is wisely.