How to Get the Height and Width of Uploaded Image using PHP

Submitted by nurhodelta_17 on Tuesday, April 10, 2018 - 13:22.

Getting Started

To beautify our view, I've added Bootstrap which is a CSS framework and is included in the downloadable of this tutorial but if you want, you can download bootstrap using this link.

Creating our Form and Script

Finally, we create our upload form and the script if the form is submitted. Create a new file, name it as index.php and paste the codes below.

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>How to Get the Height and Width of Uploaded Image using PHP</title>
        <link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css">
        <style type="text/css">
                .mt20{
                        margin-top:20px;
                }
                .mt10{
                        margin-top:10px;
                }
        </style>
</head>
<body>
<h1 class="text-center mt20">Get the Height and Width of Uploaded Image</h1>
<hr>
<div class="row justify-content-md-center">
        <div class="col-sm-3 mt20">
                <form method="POST" enctype="multipart/form-data">
                        <input type="file" name="image" class="form-control form-control-lg" required>
                        <button type="submit" name="upload" class="btn btn-primary mt10">Upload</button>
                </form>
 
                <?php
                        if(isset($_POST['upload'])){
                                $image = $_FILES['image']['tmp_name'];
                                if(!empty($image)){
                                        $image = $_FILES['image']['tmp_name'];
                                        //first method: using list() function
                                        list($width, $height) = getimagesize($image);
                                        echo "
                                                <div class='alert alert-info mt20'>
                                                        <h4>Using list() method:</h4>
                                                        <p>Width: ".$width."</p>
                                                        <p>Height: ".$height."</p>
                                                </div>
                                        ";
 
                                        //second method: assign to array
                                        $array = getimagesize($image);
                                        echo "
                                                <div class='alert alert-info mt20'>
                                                        <h4>From assigned Array:</h4>
                                                        <p>Width: ".$array[0]."</p>
                                                        <p>Height: ".$array[1]."</p>
                                                </div>
                                        ";
                                }
                                else{
                                        echo "
                                                <div class='alert alert-danger mt20'>
                                                        Please upload an Image
                                                </div>
                                        ";
                                }
                        }
                ?>
        </div>
</div>
 
 
</body>
</html>

That ends this tutorial. Happy Coding :)

Add new comment

107 views