Get selected image type from folder with php
Updated: 23-Aug-2022 / Tags: PHP Tutorials / Views: 1124 - Author: George
Introduction
Hey everyone,
In this tutorial we are going to grab and display images from a folder based on their extensions.
Let me explain.
First off all we have a folder with png, jpg, and gif formatted images.
In the example below we have a select dropdown menu in which we have the option to select
.png, .jpg, .gif, or All types of images.
Example: if we selecting the JPG option, we will see in the placeholder only images that are formated as jpg.
Try it out so you get an idea on what we are going to code.
Now that you saw our little app, let's see what files we need, and start coding.
Project's folder
Let's see our project's structure.
- We need an index.php file, this will be our home screen.
- We need a script.php file, to write the php code.
- We will have an images/ folder. Inside the folder we will have the different image types.
- And last we have a styles.css file, so we can display the images nice and clear.
- If you download the source code you will get everything, includig the images.
That is all the files we need, now let's start from the index file.
The index file
In the index file we have a basic html structure. The important thing here is that we include the script.php file in line 1. We need access to the php file every time we press the submit button.
<?php include "script.php" ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Get selected image type from folder with php</title>
</head>
<body>
</body>
</html>
The first element that i have inside the body tags is a p tag with a class of "title". I will display in the span element the selected image type with php. We will come here later to write the php code.
<body>
<p class="title">Selected image format -
<span>
<!-- display image type with php -->
</span>
</p>
The next element is a div tag with a class of "images-container". Inside the div element we will display the selected images. Again we will come here later on to write the php code.
<div class="images-container">
<!-- Displaying the images with php -->
</div>
And the last element in the index file is the html form with the select dropdown menu.
<form action="" method="post">
<select name="image-type">
<option value="">Select an image type</option>
<option value="jpg">JPG</option>
<option value="png">PNG</option>
<option value="gif">GIF</option>
<option value="*">All images</option>
</select>
<button type="submit" name="submit">Get image type</button>
</form>
Explaining the form
- action="" ... the action attribute is set to an empty string, this means that the form will submit the data to the same file. That's why we include the php file in line 1.
- method="post" ... that means that we are using the http POST method to send the data to the server and the php file.
- In the select menu in line 23, everything is straight forward. The select menu has a class which is there for styling purposes only.
- Then we have the option tags that we have set the values and the text. Notice the last option's value its an asterisk (*), i will explain this when we get to the php file.
-
And last, in line 31 we have the form's submit button.
The important thing here is the name attribute value. We will use it in the php file to check if the submit button is pressed.And that is all in the index file, now we will go to the script.php to write the php code.
The php code
Let's see what we have in the php file.
<?php
$image_type = null;
if(isset($_POST['submit'])){
$image_type = $_POST['image-type'];
$dir_name = "images/";
$images = glob($dir_name."*.$image_type");
}
- In line 2 i will initialize a variable named $image_type and i will set the value to null. I will do so because i will use the variable in the html code in the index file, and i don't want the server to throw a warning.
- Next in line 3 i will check if the submit button is pressed, as i said i will check the submit button's name attribute.
- Next in line 4 i will set to the $image_type variable the selected option's values.
- In line 5 i will create a variable named $dir_name and i will assign to it the path where the images are stored. In our case the images are stored in the images/ folder.
-
And in line 6 i will use the glob() function to get the image paths from the folder.
-
Let's focus on this line of code.
$images = glob($dir_name."*.$image_type");
The glob() function searches for all the pathnames matching a pattern
The $image_type variable is holding one of the following values. jpg, png, gif, *. Those are the values that the option tags have.
So if we hard code the parameter we will have have a value like images/*.jpg. That means that the glob() function will search inside the images/ folder and return an array that contains all files that have an extension of .jpg.
If we selecting the "All images" option from the select menu we will get an asterisk (*) as a value, and the pattern will look like this images/*.*. That means, get everything from the images/ folder.
The $images variable is an array which holds the returned filepaths.
Now let's go back to the index file and in line 11 where we have the p tag.
Back to the index file
Please go to the index file and to the paragraph element and inside the span tags write the code below to display the selected file type.
<p class="title">Selected image format -
<span>
<?php
if($image_type == "*"){
echo "All types";
}else{
echo $image_type;
}
?>
</span>
</p>
-
In line 13, we are going to have an if statement and we are going to say:
If the $image_type variable is holding an asterisk we will echo the text "All types". Else we are displaying the selected file type.
The last thing that we have to do is to go to the images container and loop through the $images array, so we can display inside an img tag the images with the selected file type.
<div class="images-container">
<?php
if(isset($_POST['submit'])){
foreach($images as $image) {
?>
<img src="<?php echo $image ?>">
<?php
}
}
?>
</div>
- In line 24, we check again if the form is submitted.
- In line 25, we loop through the $images array, and display every image using the img tag in line 27.
Summary
And that is all.
We wrote a small application on how to get selected image type from folder with php.
Hope you like it.
Last Words
Thanks for reading, i hope you find the article helpful.
Please leave a comment if you find any errors, so i can update the page with the correct code.
Source code
You can download the source code and use it in any way you like.
Times downloaded: 98