Best way to display image after user select one - php

Question

Im wondering what is the best way to display an image after a user select one of the categories on the selection:
<form method="post" action="../user/posting.php">
<input type="text" name="title" required placeholder="Title"/>
<textarea name="body" rows="6" cols="50" placeholder="Details....."></textarea>
//Here is where the selection of the icon is
<select name="stat_icon" required>
<option name="fire" value="fire">Fire</option>
<option name="traffic" value="traffic">Traffic</option>
<option name="construction" value="construction">Construction</option>
<option name="crash" value="crash">Crash</option>
<option name="weather" value="weather">Weather</option>
<option name="robbery" value="robbery">Robbery</option>
<option name="deviation" value="deviation">Deviation</option>
<option name="police" value="police">Police</option>
</select>
<input type="text" name="location" required placeholder="Location">
<input type="file" name="img_stat">
<input type="submit" value="Stat!" />
</form>
I don't know what is the best way to display the image, if I have to upload the image first or I have to only set some if statements to select the image is in one of my folders. Im using php, html and for database mysql. Any suggestion

Answer 1

you can display an image using JQuery, ofcourse you have to upload all images to your images directory first.
$(document).ready(function() {
$("#imageSelector").change(function() {
var src = $(this).val();
$("#imagePreview").html(src ? "<img src='path/to/your/image/" + src + ".jpg'>" : "");
});
});
<select id="imageSelector" name="stat_icon" required>
<option name="fire" value="fire">Fire</option>
<option name="traffic" value="traffic">Traffic</option>
<option name="construction" value="construction">Construction</option>
<option name="crash" value="crash">Crash</option>
<option name="weather" value="weather">Weather</option>
<option name="robbery" value="robbery">Robbery</option>
<option name="deviation" value="deviation">Deviation</option>
<option name="police" value="police">Police</option>
</select>
<div id="imagePreview"></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

Answer 2

Ok so basically you should do this ( This suggestion is just an opinion form me , its a way that i use it ) :
You should have your imgs already saved in the database ( a name for the img so you can grape it from the folder ).
When the user pick a catalog from the forms you should have a php code that take the picked data and bring the data that compares with the user choice . i mean by the data is the Imgs .
This is an example from a code that i already have on my website , its easy , i used PDO instead of MYSQLI :
<form action="" method="post">
<select name="catalog" class="form-control input-lg" tabindex="1" required>
<option selected>Pick Your Favorite Catalog</option>
<?php // Fetching the catalogs names from the database
while($FCN = $FetchCatalogsName->FETCH(PDO::FETCH_ASSOC))
{
?><option value="<?php echo $FCN['catalog'];?>"><?php echo $FCN['catalog'];?></option><?php
}
?>
</select>
<br>
<input type="submit" name="filter" class="col-sm-4 form-control input-lg" value="Show Catalog">
</form>
Now we have to create the php code that will recive the img catalog from
<?php
include_once('lib/dbconnect.php');
if(isset($_POST['filter']))
{
$catalog = $_POST['catalog'];
$FetchImgs = $conn->prepare("SELECT * FROM picture WHERE catalog = ? "); // Fetching all Imgs that related to that catalog that the user has picked .
$FetchImgs->execute(array($catalog));
if($FetchImgs)
{
?>
<?php while($FI = $FetchImgs->fetch(PDO::FETCH_ASSOC))
{
?>
<div class="col-md-3">
<img src="uploading/<?php echo $FI['Filename']; ?>"> // $FI['Filename'] this will return the name of the img from the database .
</div>
<?php }
}
else
{
echo "something went wrong ";
}
}
?>
Note : in my case the php code is in the same page as the html form and its directly under it .

Answer 3

I don't know what is the best way to display the image, if I have to upload the image first or I have to only set some if statements to select the image is in one of my folders.
If your sole purpose is to display the image based on the selection, then there's no need to upload any images. The only catch here is, your image names should correspond to value attributes of select input. Also, image extension should be consistent.
So first of all, remove this line <input type="file" name="img_stat"> from your form and after form submission, display the appropriate image like this:
$image_path = '/yourImagePath/' . $_POST['stat_icon'] . '.jpg';
echo '<img src="' . $image_path . '" alt="stat_icon" />';
Note(s):
Change .jpg as per your image extensions
Change /yourImagePath/ and give the appropriate directory path