CODEWITHSUNDEEP
phphtml
Yukihira Soma
Yukihira Soma

Reputation: 153

Show image in the page after uploading and inserting it to database

I want to show the image in my page after uploading and inserting it into the database. The image is used for my image slider. The reason i want to show the image here is to easily manage the image slider. That page is my admin. Im new to php and mysql, can someone give me ideas, what requirements, hints to do it?

here is the picture what i want to do.. like thumbnail enter image description here

here is my slider its working. enter image description here

NOTE: the image button is to upload the image.

here is my image slider code.

<?php
include('connect.php');
?>
<!DOCTYPE html>
<html>
    <head>
        <link href="css/style.css" rel="stylesheet" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script src="js/slider.js"></script>
        <script>
        $(document).ready(function () {
        $('.flexslider').flexslider({
        animation: 'fade',
        controlsContainer: '.flexslider'
        });
        });
        </script>
    </head>
    <body>
    <div class="container">
        <div class="flexslider">
            <ul class="slides">
                <?php
                    // Creating query to fetch images from database.
                   $query = mysqli_query($mysqli, "SELECT * from images order by id desc limit 5");
                    $result = $query;
                    while($r = mysqli_fetch_array($result)){ 
                ?>
                    <li>
                    <img src="<?php echo $r['photo'];?>" width="400px" height="300px"/>
                    </li>
                <?php 
                } 
                ?>
            </ul>
        </div>
    </div>
    </body>
</html>

here is my admin.php this is where i want to show the image.

<?php
//for connecting db
include('connect.php');
if (!isset($_FILES['image']['tmp_name'])) {
echo "";
}
else
{
$file=$_FILES['image']['tmp_name'];
$image= addslashes(file_get_contents($_FILES['image']['tmp_name']));
$image_name= addslashes($_FILES['image']['name']);
move_uploaded_file($_FILES["image"]["tmp_name"],"gallery/" . $_FILES["image"]["name"]);
$photo="gallery/" . $_FILES["image"]["name"];


$query = mysqli_query($mysqli, "INSERT INTO images(photo)VALUES('$photo')");
$result = $query; 

echo '<script type="text/javascript">alert("image successfully uploaded ");window.location=\'admin.php\';</script>';
}
?>
    <form class="form" action="" method="POST" enctype="multipart/form-data">
        <div class="image">
            <p>Upload images and try your self </p>
        <div class="col-sm-4">
              <input class="form-control" id="image" name="image" type="file" onchange='AlertFilesize();'/>
              <input type="submit" value="image"/>
            </div>
        </div>
        </form>

here is my connect.php code

<?php
// hostname or ip of server
$servername='localhost';
// username and password to log onto db server
$dbusername='root';
$dbpassword='';
// name of database
$dbname='pegasus';

////////////// Do not  edit below/////////
$mysqli = new mysqli($servername,$dbusername,$dbpassword,$dbname);
if($mysqli->connect_errno){
    printf("Connect failed: %s\n", $mysql->connect_error);
    exit();
}

?>

Upvotes: 0

Views: 2676

Answers (1)

Dale
Dale

Reputation: 10469

One approach would be to use glob to see if there are any files in the gallery folder

Something along the lines of:

<?php foreach(glob('./path/to/gallery/folder/*.{jpg,gif,png}', GLOB_BRACE) as $image): ?>
<img src="<?= $image; ?>" />
<?php endforeach; ?>

One benefit of this approach is that if there are no images, nothing will show and you're also saving a db query.

Or to make use of your database query again...

Copy this from your first file..

<?php
// Creating query to fetch images from database.
$query = mysqli_query($mysqli, "SELECT * from images order by id desc limit 5");
$result = $query;
while($r = mysqli_fetch_array($result)){ 
?>
    <img src="<?php echo $r['photo'];?>" width="400px" height="300px"/>
<?php 
    } 
?>

and reuse it in your file that you want to display the images

Reference: glob

Upvotes: 1

Related Questions